Column Chart with Custom Colorset - CanvasJS JavaScript Charts

Column Chart with Custom Colorset - CanvasJS JavaScript Charts

by Khanh Le

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="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints = [];
var indexLabels = ["High", "Low", "Medium"];
var colors = [ "red", "green", "blue" ];
var labels = ["Jan", " ", " ", "Feb", " ", " ", "March", " ", " ", " "];

var jsonData = [
  { "y": 90 },
  { "y": 40 },
  { "y": 70 },
  { "y": 70 },
  { "y": 50 },
  { "y": 30 },
  { "y": 60 },
  { "y": 50 },
  { "y": 40 }
];

for (var i = 0; i < jsonData.length; i++) {
  dataPoints.push({
    y: jsonData[i].y,
    label: labels[i],
    indexLabel: indexLabels[i % indexLabels.length],
  });
}

CanvasJS.addColorSet("customColorSet", colors); 

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  colorSet:  "customColorSet",
  theme: "light2", 
  title: {
    text: "Month wise Risk Analysis"
  },

  axisY: {
    title: "Total Count",
    lineThickness: 3,
    tickThickness: 2,
    gridThickness: 0,
    stripLines: [{
      value: 0,
      showOnTop: true,
      color: "gray",
      thickness: 2
    }]
  },
  axisX: {
    lineThickness: 0,
    tickThickness: 0,
    title: "Months"
  },
  legend: {
    cursor: "pointer",
    itemclick: toggleDataSeries
  },
  toolTip: {
    shared: true,
    content: toolTipFormatter
  },
  data: [{
    type: "stackedColumn",
    //indexLabel: "High",

    //indexLabel: "{y}",

    label: "label",
    indexLabelPlacement: "outside",
    indexLabelOrientation: "horizontal",
    //showInLegend: true,
    //color: "gold",
    //name: "Male",
    //indexLabel: "{x}, {y}",
    //indexLabelPlacement: "outside",
    // indexLabelOrientation: "horizontal",
    dataPoints: dataPoints
  }]
});
chart.render();

function toolTipFormatter(e) {
  var str = "";
  var total = 0;
  var str3;
  var str2;
  for (var i = 0; i < e.entries.length; i++) {
    var str1 = "<span style= \"color:" + e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: " + e.entries[i].dataPoint.y + " <br/>";
    total = e.entries[i].dataPoint.y + total;
    str = str.concat(str1);
  }
  str2 = "" +...