Multiple Axes with Color matching its Data Series Color | CanvasJS JavaScript Charts

Multiple Axes with Color matching its Data Series Color | 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 chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Single Axes with Color matching its Data Series Color"
  },
  axisY:
    {
      title: "Frac Stages Completed"
    },
  
  axisY2:
    {
			// title: "Axis Y-2",
			maximum: 10 + 1,
      minimum: 0,
      interval: 1,
      labelFormatter: function(){
        return " ";
      },
      gridThickness: 0,
      tickLength: 0,
      lineThickness: 0,
    },
  data: [
    {
      type: "column",
      showInLegend: true,
      name: "Alpha",
      xValueFormatString: "####",
      dataPoints: [
 				{ label: '10-17-18', y: 3 },
        { label: '10-18-18', y: 1 },
        { label: '10-19-18', y: 3 },
      ]
    },
    {
      type: "column",
      showInLegend: true,
			/* axisYIndex: 2,
			      axisYType: "secondary", */
      name: "Bravo",
      /* xValueFormatString: "####", */
      dataPoints: [
        { label: '10-17-18', y: 3 },
        { label: '10-18-18', y: 1 },
        { label: '10-19-18', y: 2 },
      ]
    },
    {
      type: "column",
      showInLegend: true,
      name: "Charlie",
      axisYType: "primary",
      // axisYIndex: 2,
      // axisYType: "secondary",
      // xValueFormatString: "####",
      dataPoints: [
        { label: '10-17-18', y: 3 },
        { label: '10-18-18', y: 8 },
        { label: '10-19-18', y: 3 },
      ]
    },
    {
      type: "line",
      // showInLegend: true,
      // axisYIndex: 2,
      // name: "Charlie",
      // xValueFormatString: "####",
      // lineDashType: "dash",
      color: "#000",
      markerColor: "transparent",
      axisYType: "secondary",
      dataPoints: [
        { label: '10-17-18', y: 9 },
        { label: '10-18-18', y: 10 },
        { label: '10-19-18', y: 8 },
      ]
    },
    {
      type: "scatter",
      lineDashType: "dash",
      color: "#000",
      markerSize: 30,
      markerBorderColor: "#fff",
      markerBorderThickness: 2,
      indexLabel: "{y}",
      indexLabelFontSize: 14,
      axisYType:...