Search code examples
canvasjs

How to put value of end chart in bottom?


How to put a value for target in the start and bottom chart ?

      data: [
        {
          indexLabelFontSize: 10,
          indexLabelFontFamily: "Arial",
          indexLabelPlacement: "inside",
          type: "doughnut",
          dataPoints: [
            { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},
            { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},        
          ]
        }
      ]

this is the link my chart update http://jsfiddle.net/5y7tevnv/2/


Solution

  • Just put two dataPoint with y value 0, one at the staring and another at the end. I hope, that will fill your requirement.

    var chart6 = new CanvasJS.Chart("chartContainer",
    {   
    
      title:{
            text: "Target 2016",
            verticalAlign: "top",
            fontSize: 12              
          },  
      subtitles: [
        {
     /*     dockInsidePlotArea: true, */
          verticalAlign: "center",
          horizontalAlign: "center",
          text: "Target 200 m"
        }
      ],
      data: [
        {
          indexLabelFontSize: 10,
          indexLabelFontFamily: "Arial",
          indexLabelPlacement: "inside",
          type: "doughnut",
          dataPoints: [
            { y: 0, indexLabel: "0", indexLabelFontColor: "black"},
            { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},
            { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},
            { y: 0, indexLabel: "200", indexLabelFontColor: "black"},
          ]
        }
      ]
    });
    /* chart6 semi pie */ 
    /* convert chart6 ke semi pie*/
    convertToHalfDoughnut(chart6);
    chart6.render();
    function convertToHalfDoughnut(chart6){
      var sum = 0;
      var dataPoints = chart6.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});
    }
    /* --- */
    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>