How can display half donut chart

• September 16, 2023 at 3:40 pm #43760
  
  mcaprema

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

  September 20, 2023 at 9:54 am #43776
  
  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