Chart.js Line Charts Samples

chart_js_line_charts.js

var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Age: 0", "Age: 1", "Age: 2", "Age: 3", "Age: 4", ['Lunaの歳', 'Age: 5'], "Age: 6", ['Point', 'Age: 7'], "Age: 8", "Age: 9", "Age: 10"],
    datasets: [{
      label: "罹患率 (Morbidity)",
      backgroundColor: "rgba(255, 99, 132, 0.3)",
      borderColor: "rgb(255, 99, 132)",
      pointHoverBackgroundColor: "rgb(225, 225, 225)",
      pointHoverRadius: 10,
      pointRadius: [3, 4, 6, 8, 10, 20, 10, 20, 9, 12, 20],
      data: [0.1, 0.3, 0.4, 0.6, 0.9, 1, 0.9, 1.8, 1.5, 1.8, 2.6],
      fill: true
    }]
  },
  plugins: [{
    afterDatasetsDraw: function (d, h) {
      var f = d.getDatasetMeta(0);
      var e = f.data;
      var a = e[7]._model.x;
      var g = e[7]._yScale.top;
      var c = e[7]._yScale.bottom;
      var b = d.chart.ctx;
      b.beginPath();
      b.lineWidth = 2;
      b.strokeStyle = "#008edd";
      b.moveTo(a, g);
      b.lineTo(a, c);
      b.stroke()
    }
  }],
  options: {
    tooltips: {
      backgroundColor: 'rgba(43, 8, 169, 0.7)'
    },
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: "腎臓病発病率の年齢推移"
    },
    legend: {
      position: "top"
    },
    scales: {
      xAxes: [{
        gridLines: {
          color: "lightgray"
        },
        ticks: {
          beginAtZero: true
        },
        display: true,
        scaleLabel: {
          display: true,
          labelString: "年齢 (Age)"
        }
      }],
      yAxes: [{
        gridLines: {
          color: ['gray', 'red', 'orange', 'yellow', 'green', 'pink'],
          zeroLineColor: "black"
        },
        ticks: {
          beginAtZero: true,
          stepSize: 0.5,
          userCallback: function (tick) {
            return tick.toString() + '%';
          }
        },
        display: true,
        scaleLabel: {
          display: true,
          labelString: "Morbidity (%)"
        }
      }]
    }
  }
});