Line Chart | Chart.js
Description: Open source HTML5 Charts for your website

# # Line Chart

function getLineColor(ctx) { return Utils.color(ctx.datasetIndex); } function alternatePointStyles(ctx) { const index = ctx.dataIndex; return index % 2 === 0 ? 'circle' : 'rect'; } function makeHalfAsOpaque(ctx) { return Utils.transparentize(getLineColor(ctx)); } function adjustRadiusBasedOnData(ctx) { const v = ctx.parsed.y; return v < 10 ? 5 : v < 25 ? 7 : v < 50 ? 9 : v < 75 ? 11 : 15; } const config = { type: 'line', data: data, options: { plugins: { legend: false, tooltip: true, }, elements: { line: { fill: false, backgroundColor: getLineColor, borderColor: getLineColor, }, point: { backgroundColor: getLineColor, hoverBackgroundColor: makeHalfAsOpaque, radius: adjustRadiusBasedOnData, pointStyle: alternatePointStyles, hoverRadius: 15, } } } };

    function getLineColor(ctx) {
      return Utils.color(ctx.datasetIndex);
    }
    function alternatePointStyles(ctx) {
      const index = ctx.dataIndex;
      return index % 2 === 0 ? 'circle' : 'rect';
    }
    function makeHalfAsOpaque(ctx) {
      return Utils.transparentize(getLineColor(ctx));
    }
    function adjustRadiusBasedOnData(ctx) {
      const v = ctx.parsed.y;
      return v < 10 ? 5
        : v < 25 ? 7
        : v < 50 ? 9
        : v < 75 ? 11
        : 15;
    }
    const config = {
      type: 'line',
      data: data,
      options: {
        plugins: {
          legend: false,
          tooltip: true,
        },
        elements: {
          line: {
            fill: false,
            backgroundColor: getLineColor,
            borderColor: getLineColor,
          },
          point: {
            backgroundColor: getLineColor,
            hoverBackgroundColor: makeHalfAsOpaque,
            radius: adjustRadiusBasedOnData,
            pointStyle: alternatePointStyles,
            hoverRadius: 15,
          }
        }
      }
    };

function generateData() { return Utils.numbers({ count: DATA_COUNT, min: 0, max: 100 }); } const data = { labels: Utils.months({count: DATA_COUNT}), datasets: [{ data: generateData() }] };

    function generateData() {
      return Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      });
    }
    const data = {
      labels: Utils.months({count: DATA_COUNT}),
      datasets: [{
        data: generateData()
      }]
    };

const DATA_COUNT = 12; Utils.srand(110); const actions = [ { name: 'Randomize', handler(chart) { chart.data.datasets.forEach(dataset => { dataset.data = generateData(); }); chart.update(); } }, ];

    const DATA_COUNT = 12;
    Utils.srand(110);
    const actions = [
      {
        name: 'Randomize',
        handler(chart) {
          chart.data.datasets.forEach(dataset => {
            dataset.data = generateData();
          });
          chart.update();
        }
      },
    ];

## # Docs

- Line
  - Point Styling
- Options
  - Scriptable Options
- Data structures (`labels`)