QuickChart Customize

quickchart_customize.html

<!--We recommend that you URL-encode the entire chart config-->
<img src="https://quickchart.io/chart?width=700&height=500&devicePixelRatio=1.3&c={
  type: 'line',
  data: {
    labels: ['Age: 0', 'Age: 1', 'Age: 2', 'Age: 3', 'Age: 4', ['Lunaの歳', 'Age: 5'], 'Age: 6', 'Age: 7', 'Age: 8', 'Age: 9', 'Age: 10'],
    datasets: [{
      label: '罹患率 (Morbidity)',
      data:  [0.1, 0.3, 0.4, 0.6, 0.9, 1, 0.9, 1.8, 1.5, 1.8, 2.6],
      fill: true,
      lineTension: 0.3,
      borderColor: 'rgb(255, 99, 132)',
      pointRadius: [3, 4, 6, 8, 10, 20, 10, 20, 9, 12, 6],
      backgroundColor: 'rgba(255, 99, 132, 0.3)'
    }]
  },
  options: {
    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 (%)'
        }
      }]
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: 'Age: 7',
        borderColor: '#008edd',
        borderWidth: 2,
        label: {
          enabled: true,
          content: '罹患率が急激に上昇する',
          position: 'top'
        }
     }, {
        type: 'box',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        xMin: 'Age: 4',
        xMax: 'Age: 9',
        backgroundColor: 'rgba(200, 200, 200, 0.2)',
        borderColor: '#ccc',
      }]
    },
    plugins: {
      datalabels: {
        display: true,
        align: 'top',
        color: '#ffffff',
        backgroundColor: 'rgba(43, 8, 169, 0.7)',
        borderRadius: 3
      },
    }
  }
}">