How to get x-axis value in chart as string?

by

-1👍

✅

For your case you should supply label property not x value and also i believe you should use column charts for this purpose.

You might see some labels not showing up.You can either set the angle or increase the width of chart to make it visible.

Try running this snippet

window.onload = function() {
  var dataPoints7 = [];

  var chart7 = new CanvasJS.Chart("chartContainer7", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Cases in States"
    },
    axisY: {
      title: "Cases",
      titleFontSize: 24
    },
    axisX: {
      labelAngle: 180
    },
    data: [{
      type: "line",
      yValueFormatString: "#,### Cases",
      dataPoints: dataPoints7
    }]
  });
  fetch("https://api.covid19india.org/data.json", {
      "method": "GET"
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      for (var i = 1; i < data.statewise.length; i++) {
        dataPoints7.push({
          label: data.statewise[i].state,
          y: parseInt(data.statewise[i].confirmed)
        });
      }
      chart7.render();
    });

}
<!DOCTYPE html>
<html lang="en">

<div id="chartContainer7" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</html>

Leave a comment