Pyramid CanvasJS Chart

by Benahmed Taoufiq

HTML

<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>

<div id="pyramidChartContainer" class="container-chart"></div>

CSS

.container-chart{min-height:350px;width:100%}

JavaScript

var data = [
    {
      label: "Client Service",
      y: 40,
      legendText: "Client",exploded:true
    },
    {
      label: "RH Service",
      y: 50,
      legendText: "RH",
    },
    {
      label: "Marketing Service ",
      y: 120,
      legendText: "Marketing",exploded:true
    },
    {
      label: "Network Service",
      y: 60,
      legendText: "Network",
    },
  ],
  c = new CanvasJS.Chart("pyramidChartContainer", {
		theme:"theme1",
    title: {
      text: "Services reports",
    },
    legend: {
      cursor: "pointer",
      itemclick: toggleItem,
    },
    data: [
      {
        type: "pyramid",
        showInLegend: true,
				toolTipContent: "{y} - #percent %",
        indexLabel: "{legendText}",
				//indexLabelPlacement: "inside",
        //indexLabelFontColor: "white",
        dataPoints: data
      },
    ],
  });
	function toggleItem(e) {
	if(e.dataPoint.hasOwnProperty("actualYValue") 
	&& e.dataPoint.actualYValue !== null) {
    e.dataPoint.y = e.dataPoint.actualYValue;
    e.dataPoint.actualYValue = null;
		e.dataPoint.indexLabelFontSize=null;
    e.dataPoint.indexLabelLineThickness = null;
    e.dataPoint.legendMarkerType = "circle";
  } 
  else {
    e.dataPoint.actualYValue = e.dataPoint.y;
    e.dataPoint.y = 0;//try null or a small float like 
		//0.01 here, you will see 
		//the chart is correctlly displayed after clicking on Network legend
    e.dataPoint.indexLabelFontSize = 0;
    e.dataPoint.indexLabelLineThickness = 0; 
    e.dataPoint.legendMarkerType = "cross";
  }
  
	e.chart.render();
}
c.render()