Chart.js #5474

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="container">
  <h2>Chart.js Responsive Line Chart Demo</h2>
  <div>
    <canvas id="canvas"></canvas>
  </div>
  <button>update chart</button>
</div>

CSS

.container {
  width: 80%;
  margin: 20px auto;
}

.p {
  text-align: center;
  font-size: 14px;
  padding-top: 140px;
}

JavaScript

Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 7;
Chart.defaults.global.elements.point.hoverBorderWidth = 2;
Chart.defaults.global.elements.line.tension = 0.01;
Chart.defaults.global.elements.line.borderCapStyle = "round";
Chart.defaults.global.elements.line.borderJoinStyle = "round";
Chart.defaults.global.elements.line.fill = false;

/******************************************************************/

let btwn = (x = 1, y = 10) => {
  return Math.floor(Math.random() * y) + x;
};
let rand = () => {
  let n = btwn(1, 10);
  return n * 10;
};

let dataSize = 10;

let newLabels = () => Array(dataSize).fill("data");
let zeroData = () => Array(dataSize).fill(0);
let newData = () => Array(dataSize).fill("").map(rand);

var lineChartData = {
  labels: newLabels(),
  datasets: [
    {
      lineTension: 0,
      data: newData()
    }
  ]
};

var ctx = document.getElementById("canvas").getContext("2d");

function makeChart() {
  return new Chart(ctx, {
    type: "line",
    data: lineChartData,
    options: {
      legend: { display: false },
      scales: {
        xAxes: [{
          
        }],
        yAxes: [
          {
            ticks: {
              beginAtZero: false
            }
          }
        ]
      }
    }
  });
}
var LineChartDemo = makeChart();

document
  .querySelector("button")
  .addEventListener("click", function updateChart(e) {
    dataSize = dataSize === 10 ? 30 : 10;

    // Zero it out
    LineChartDemo.data.datasets.forEach(dataset => {
      var length = dataset.data.length;
      if (dataSize > length) {
        Array.prototype.push.apply(dataset.data, Array(dataSize - length));
      }
    });
    LineChartDemo.update({duration: 0});

    LineChartDemo.data.labels = newLabels();

    LineChartDemo.data.datasets.forEach(dataset => {
      dataset.data = newData();
    });
    LineChartDemo.update();
    // LineChartDemo = makeChart();
  });