Basic Column Chart - CanvasJS JavaScript Charts
Basic Column Chart - CanvasJS JavaScript Charts
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="ReviewChart1a" style="height: 750px; width: 100%;"></div>
JavaScript
var chart1a = new CanvasJS.Chart("ReviewChart1a", {
animationEnabled: true,
title:{
text:"Treated Diagnoses (Cancer)",
fontSize: 18
},
axisX:{
interval: 1,
labelFontSize: 12,
labelWrap: false,
labelFontColor: "dimGrey"
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
titleFontSize: 15,
labelFontColor: "dimGrey",
labelFontSize: 12,
title: "Diagnosis Distribution based on OHIP Codes and Cancer Categories"
},
data: [{
type: "bar",
name: "patients",
axisYType: "secondary",
color: "#014D65",
indexLabel: "{y}",
indexLabelPlacement: "outside",
indexLabelOrientation: "horizontal",
indexLabelFontSize: 10,
dataPoints: [
{ y: 4, label: "Myelodysplastic Syndrome- 284:" },
{ y: 11, label: "Leukemia- 205, 208:" },
{ y: 15, label: "LEUKEMIA:", color: "Green", labelFontColor: "Green" },
{ y: 6, label: "Multiple Myeloma- 203:" },
{ y: 36, label: "Lymphoma/sarcoma- 200:" },
{ y: 42, label: "LYMPHOMA:", color: "Green", labelFontColor: "Green" },
{ y: 35, label: "UNKNOWN PRIMARY: 198:", color: "Green", labelFontColor: "Green" },
{ y: 17, label: "GLIOBLASTOMA: 191:", color: "Green", labelFontColor: "Green"},
{ y: 11,...