How can display half donut chart

[mcaprema]

Hi Team, Can you tell me what parameter has been used to display semi circle Donut chart ( half doNut start)?

[Sachin Bisht]

@mcaprema,

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