Chartjs-Is it possible to fill particular portion between given start & end angle in pie chart in chart.js?

by

1👍

✅

You can use Highcharts pie chart and wrote custom function that will ‘fill’ your chart depending on start angle and end angle you will pass in your point.

Your data may look like that: 

  data: [{
    startAngle: 0,
    endAngle: 105,
    color: 'green'
  }, {
    startAngle: 315,
    endAngle: 360,
    color: 'green'
  }]

And your custom function may be similar to this function:

function(chart) {
    var series = chart.series[0],
      start = series.data[0].startAngle,
      updatedData = [start],
      pointBetween,
      point;
    Highcharts.each(series.data, function(p) {
      pointBetween = p.startAngle - start;
      if (pointBetween !== 0) {
        updatedData.push({
          y: p.startAngle - start
        });
      }
      point = {
        color: p.color,
        y: p.endAngle - p.startAngle
      }
      updatedData.push(point);
      start = p.endAngle;
    });
    updatedData.push({
      y: 360 - start
    })
    series.setData(updatedData);
  }

I have made very simple example showing how your chart may look with this function:

http://jsfiddle.net/46vfygqu/

Leave a comment