CODEWITHSUNDEEP
dc.js
Daniel Miclos
Daniel Miclos

Reputation: 373

barChart svg gradient fill

I know this is something that isn't simple even using just D3, but at least there is examples online.

My question is: How to make gradient fills in a dc.barChart? Something like ordinalColors seems to accept only RGB values.

What I want is to do something like this but with bars:

enter image description here

Thanks

Upvotes: 1

Views: 91

Answers (1)

Daniel Miclos
Daniel Miclos

Reputation: 373

ok, looks like I need to put the 'defs' in a renderlet. So the code would be something like:

.renderlet(function (chart) {

      const barBG = d3.select(divRef)
                      .select('svg')
                      .append('defs')
                      .append("linearGradient");


      barBG
        .attr("id", "barBg")
        .attr("x1", "0")
        .attr("x2", "0")
        .attr("y1", "200")
        .attr("y2", "00")
        .attr("gradientUnits", "userSpaceOnUse");

      barBG
        .append("stop")
        .attr("offset", "0%")
        .attr("stop-color", "rgb(31, 119, 180)")
        .attr("stop-opacity", "0.1");


      barBG
        .append("stop")
        .attr("offset", "100%")
        .attr("stop-color", "rgb(31, 119, 180)")
        .attr("stop-opacity", "1");

      chart.selectAll("g.x text")
        .attr('dx', '30')
        .attr('transform', "translate(-15,0) rotate(-90)")
        .attr('display', 'none');

      // chart.selectAll('.bar')
      //   .attr("fill", "url(#barBg)");
    })
    ;

Then, you add the id of the the gradient in the color scale:

.ordinalColors(['url(#barBg)','rgb(255, 127, 14)'])

Upvotes: 1

Related Questions