CODEWITHSUNDEEP
d3.jsdc.js
Neptunemo
Neptunemo

Reputation: 155

Draw bar charts with rounded rectangles in dc.js

I'm trying to add rounded rectangles to a bar chart I've created in dc.js. I've tried adding a renderlet, but that didn't work. Then tried to add this bit of code after the dc.renderAll() call:

dc.transition(svg.selectAll('rect'), chartProjectsCreatedChart.transitionDuration())
            .attr('rx', 5)
            .attr('ry', 5)

Interestingly, this gives a rounded rectangle to the legend but not the individual chart bars

enter image description here

, even though the elements all have "rx" and "ry" attributes.

enter image description here

I see that dc.heatmap has xBorderRadius and yBorderRadius attributes, but they don't seem to be there for normal barcharts.

Thanks

Upvotes: 0

Views: 1082

Answers (1)

Jerry Chong
Jerry Chong

Reputation: 9240

D3.js V5 + DC.js Solution

chart.on('pretransition', (chart) => {
      const svg = chart.select('svg');

      // Bar Border Radius
      svg.selectAll("rect")
          .attr("rx", "5")
          .attr("ry", "5");
});

Upvotes: 1

Related Questions