CODEWITHSUNDEEP
javascriptc3.js
peterc
peterc

Reputation: 7873

How to dynamically set pie piece text colour on a C3 chart

I have a C3 pie chart similar to this online example. In my case I set the data.colors based on incoming external data.

My setup looks like the following (I pass in the colors to use)...

        this.pieChart = generate({
            data: {
              columns: columns,
              colors: colours,
              type: 'pie',
              onclick: (e) => {
                this.handlePieClick(e.id);
              },
            },
            bindto: '#pie-chart',
            tooltip: {
              show: false
            },
            transition: {
              duration: 1000
            },
            legend: {
              item: {
                onclick: id => {
                  this.handlePieClick(id);
                }
              }
            },
          });

My app has not control over these colors. When the colors are light, the white text is hard to see. I may have a mixture of light and dark colours. What I need to do is examine each color and then be able to set the text either white or black for each pie piece text color, however I can see no callback function I can override to do this.

Does anyone know a way to do this? The big thing being I have no control over the colors coming in, and need to set the text colors in code once I have the color data.

Thanks in advance for any help!

Upvotes: 1

Views: 1212

Answers (1)

mgraham
mgraham

Reputation: 6207

Use the onrendered: option in the c3 configuration

In there, loop through the colours, and for each

  1. Construct a new colour that shows up against the pie colour

  2. Apply it to the text in the right segment using the class definitions (doable as the colour map and the pie segments element classes both contain the names of the data series)

http://jsfiddle.net/shxLfss3/2/

onrendered: function () {
    var colEntries = d3.entries(this.config.data_colors);
    colEntries.forEach (function (colEntry) {
        // get pie segment colour, make a contrasting colour from it
        var hsl = d3.hsl(colEntry.value);
        hsl.l = hsl.l > 0.5 ? 0 : 1;    // make black if light, white if dark
        var newCol = hsl.toString();
        // apply that color to the segmenbt's text
        var segment = d3.select(this.config.bindto+" .c3-chart-arc.c3-target-"+colEntry.key);
        segment.select("text").style("fill", newCol);
    }, this);
}

Upvotes: 1

Related Questions