<canvas id="chart" height="200"></canvas>
const func = (x, a) => {
  return a[0] + a[1] * x + a[2] * x ** 2;
};

const ctx = document.getElementById('chart');
const myChart = new Chart(ctx, {
  // 散布図を表す
  type: 'scatter',
  // データ
  data: {
    // データ系列の設定
    datasets: [{
      // 凡例に表示する配列
      label: 'sample data',
      // 線を表示する
      showLine: true,
      // 実際のXYデータの配列
      data: ((a) => {
        const ret = [];
        for(let x = 0; x <= 10; x++){
          ret.push({ x: x, y: func(x, a) });
        }
        return ret;
      })([ 0.1, 2, 1 ]),
    }],
  },
  // グラフオプション
  options: {
    // レスポンシブ対応
    responsive: true,
    plugins: {
      // グラフタイトルの設定
      title: {
        text: 'Chart.js設定例',
        display: true,
        font: {
          size: 16,
        }
      },
      // 凡例の設定
      legend: {
        display: true,
        position: 'top',
        align: 'center',
      }
    },
    // x軸,y軸の設定
    scales: {
      x: {
        type: 'linear',
        display: true,
        position: 'bottom',
        min: 0,
        max: 12,
        title: {
          display: true,
          text: 'x',
          font: {
            size: 14,
          }
        },
        ticks: {
          stepSize: 2,
        }
      },
      y: {
        type: 'linear',
        display: true,
        title: {
          display: true,
          text: 'y',
          font: {
            size: 14,
          }
        },
      }
    },
  },
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js