Basic Column Chart - CanvasJS

Basic Column Chart

by rohitranjan1612

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>

React

var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      title: {
        text: "Sensor Report Compare",
      },
      axisX: {
        title: "Time",
        suffix: ":00",
        interval: 1,
      },
      axisY: {
        title: "Temperature (in °C)",
        includeZero: false,
        suffix: " °C",
      },
      legend: {
        cursor: "pointer",
        fontSize: 16,
      },
      toolTip: {
        shared: true,
        content: "{name} {x}:00: {y} °C",
      },
      data: [
        {
          name: "2020-05-05",
          type: "spline",
          showInLegend: true,
          dataPoints: [
            { x: 0, y: 29.56 },
            { x: 1, y: 29.56 },
            { x: 2, y: 29.5 },
            { x: 3, y: 29.44 },
            { x: 4, y: 29.44 },
            { x: 5, y: 29.31 },
            { x: 6, y: 29.19 },
            { x: 7, y: 29.44 },
            { x: 8, y: 29.13 },
            { x: 9, y: 29.69 },
            { x: 10, y: 29.5 },
            { x: 11, y: 29.75 },
            { x: 12, y: 29.88 },
            { x: 13, y: 29.75 },
            { x: 14, y: 29.75 },
            { x: 15, y: 29.88 },
            { x: 16, y: 30.13 },
            { x: 17, y: 30.06 },
            { x: 18, y: 30.44 },
            { x: 19, y: 30.5 },
            { x: 20, y: 30.31 },
            { x: 21, y: NaN },
            { x: 22, y: NaN },
            { x: 23, y: NaN },
          ],
        },
        {
          name: "2020-05-06",
          type: "spline",
          showInLegend: true,
          dataPoints: [
            { x: 0, y: NaN },
            { x: 1, y: NaN },
            { x: 2, y: NaN },
            { x: 3, y: NaN },
            { x: 4, y: NaN },
            { x: 5, y: NaN },
            { x: 6, y: NaN },
            { x: 7, y: NaN },
            { x: 8, y: NaN },
            { x: 9, y: NaN },
            { x: 10, y: NaN },
            { x: 11, y: NaN },
            { x: 12, y: NaN },
            { x: 13, y: NaN },
          ...