Add and Remove Y-Axis Dynamically - CanvasJS JavaScript Charts

Add and Remove Y-Axis Dynamically - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<button id="addAxis">Add Axis</button>
<button id="removeAxis">Remove Axis</button>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "Add and Remove Y-Axis Dynamically"
  },
  axisY: [{
      title: "axisY added using chart.options",
      titleFontSize: 20
  }],
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }
  ]
});
chart.render();

document.getElementById("addAxis").addEventListener("click", function(){
  chart.addTo("axisY", {title: "axisY added using addTo()"});
});

document.getElementById("removeAxis").addEventListener("click", function(){
  if(chart.axisY[1])
    chart.axisY[1].remove();      
});