Home Forums Chart Support How can display half donut chart Reply To: How can display half donut chart



You can create a semi-doughnut chart using doughnut chart by adding a datapoint with y value equivalent to sum of y values of datapoints and set it’s color to “transparent”. Please take a look at the code snippet below for the same.

function convertToHalfDoughnut(chart){
    var sum = 0;
    var dataPoints = chart.options.data[0].dataPoints;
    for(var i = 0; i < dataPoints.length; i++){
        sum += dataPoints[i].y;
    dataPoints.splice(0, 0, {y: sum, color: "transparent", toolTipContent: null});

Also, check out this JSFiddle for complete working code.

You can also refer to this thread for detailed explanation

Sachin Bisht
Team CanvasJS