Change background filling on c3 donut chart

292
January 25, 2017, at 3:02 PM

I've a problem with c3 library. Indeed, I have to generate many donut charts in table cells. Charts has well generated but the background is not filled, only the first chart has the good background filling...

Here my generating code :

var chartTitle1dy = 0;
  var chart = c3.generate({
    bindto: "#" + prefix + "_chart_" + scopeId + "_" + chartSiteId,
    size: {
      height: 75
    },
    data: {
      columns: [
        ['show', value],
        ['dontshow', dontShow]
      ],
      type: 'donut',
      order: null
    },
    color: {
      pattern: ['green', 'white']
    },
    legend: {
      show: false
    },
    donut: {
      label: {
        show: false
      },
      width: 5,
      expand: false
    },
    tooltip: {
      show: true,
      contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
        var $$ = this, config = $$.config,
          titleFormat = config.tooltip_format_title || defaultTitleFormat,
          nameFormat = config.tooltip_format_name || function (name) { return name; },
          valueFormat = config.tooltip_format_value || defaultValueFormat,
          text, i, title, value, name, bgcolor;
        for (i = 0; i < d.length; i++) {
          if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
          if (! text) {
            title = titleFormat ? titleFormat(d[i].x) : d[i].x;
            text = "<table class='"
              + $$.CLASS.tooltip + "'>"
              + (title || title === 0 ? "<tr><th colspan='2' style='text-align: center;'>"
              + title
              + "</th></tr>" : "");
          }
          name = nameFormat(d[i].name);
          value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
          bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
          text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
          text += "<td class='value' colspan='2' style='text-align: center;'>" + value + "</td>";
          text += "</tr>";
        }
        return text + "</table>";
      },
      format: {
        title: function() {return 'Details'},
        value: function() {
          return numerator + ' / ' + denominator;
        }
      }
    }
  });
// overide the chart title
  var label = d3.select('#myDifferentIdForEachChart text.c3-chart-arcs-title');
  label.html(''); // remove existant text
  label.insert('tspan')
    .text(Number(value) + "%")
    .attr('fill', '#000')
    .attr('dy', chartTitle1dy)
    .attr('x', 0)
    .attr('y', 0)
    .attr("style", "font-size: 0.7em");
  // grey background to fill center of donut
    d3.select("td .c3 .c3-chart")
      .insert("circle", ":first-child")
      .attr("cx", chart.internal.width / 2)
      .attr("cy", chart.internal.height / 2 - chart.internal.margin.top)
      .attr("r", chart.internal.innerRadius)
      .attr("fill", "#d3d3d3")
    ;

And there the result with my glitch, every value with "%" are charts, but filled with white color instead of lightgray.

Could you help me to fix it please ?

Thanks by advance,

READ ALSO
How to apply CSS style for Angular JS drop down

How to apply CSS style for Angular JS drop down

Hi I have an requirement to show the Dropdown using angular JS

269
Set Big Image Same As Height Width of image Tag Without Stretch.

Set Big Image Same As Height Width of image Tag Without Stretch.

I want to try set big image in 160 x 160 height widthbut it stretch

235
Scaling the image and fitting in the canvas after rotation

Scaling the image and fitting in the canvas after rotation

I'm trying to rotate an image and fit it in the canvas using button clicks

249
text position is changing when exported data in pdf

text position is changing when exported data in pdf

i am creating a web app using angularjs,

282