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

# # Time Scale

const config = { type: 'line', data: data, options: { plugins: { title: { text: 'Chart.js Time Scale', display: true } }, scales: { x: { type: 'time', time: { // Luxon format string tooltipFormat: 'DD T' }, title: { display: true, text: 'Date' } }, y: { title: { display: true, text: 'value' } } }, }, };

    const config = {
      type: 'line',
      data: data,
      options: {
        plugins: {
          title: {
            text: 'Chart.js Time Scale',
            display: true
          }
        },
        scales: {
          x: {
            type: 'time',
            time: {
              // Luxon format string
              tooltipFormat: 'DD T'
            },
            title: {
              display: true,
              text: 'Date'
            }
          },
          y: {
            title: {
              display: true,
              text: 'value'
            }
          }
        },
      },
    };

const DATA_COUNT = 7; const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100}; const data = { labels: [ // Date Objects Utils.newDate(0), Utils.newDate(1), Utils.newDate(2), Utils.newDate(3), Utils.newDate(4), Utils.newDate(5), Utils.newDate(6) ], datasets: [{ label: 'My First dataset', backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5), borderColor: Utils.CHART_COLORS.red, fill: false, data: Utils.numbers(NUMBER_CFG), }, { label: 'My Second dataset', backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5), borderColor: Utils.CHART_COLORS.blue, fill: false, data: Utils.numbers(NUMBER_CFG), }, { label: 'Dataset with point data', backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green, 0.5), borderColor: Utils.CHART_COLORS.green, fill: false, data: [{ x: Utils.newDateString(0), y: Utils.rand(0, 100) }, { x: Utils.newDateString(5), y: Utils.rand(0, 100) }, { x: Utils.newDateString(7), y: Utils.rand(0, 100) }, { x: Utils.newDateString(15), y: Utils.rand(0, 100) }], }] };

    const DATA_COUNT = 7;
    const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
    const data = {
      labels: [ // Date Objects
        Utils.newDate(0),
        Utils.newDate(1),
        Utils.newDate(2),
        Utils.newDate(3),
        Utils.newDate(4),
        Utils.newDate(5),
        Utils.newDate(6)
      ],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
        borderColor: Utils.CHART_COLORS.red,
        fill: false,
        data: Utils.numbers(NUMBER_CFG),
      }, {
        label: 'My Second dataset',
        backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
        borderColor: Utils.CHART_COLORS.blue,
        fill: false,
        data: Utils.numbers(NUMBER_CFG),
      }, {
        label: 'Dataset with point data',
        backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
        borderColor: Utils.CHART_COLORS.green,
        fill: false,
        data: [{
          x: Utils.newDateString(0),
          y: Utils.rand(0, 100)
        }, {
          x: Utils.newDateString(5),
          y: Utils.rand(0, 100)
        }, {
          x: Utils.newDateString(7),
          y: Utils.rand(0, 100)
        }, {
          x: Utils.newDateString(15),
          y: Utils.rand(0, 100)
        }],
      }]
    };

const actions = [ { name: 'Randomize', handler(chart) { chart.data.datasets.forEach(dataset => { dataset.data.forEach(function(dataObj, j) { const newVal = Utils.rand(0, 100); if (typeof dataObj === 'object') { dataObj.y = newVal; } else { dataset.data[j] = newVal; } }); }); chart.update(); } }, ];

    const actions = [
      {
        name: 'Randomize',
        handler(chart) {
          chart.data.datasets.forEach(dataset => {
            dataset.data.forEach(function(dataObj, j) {
              const newVal = Utils.rand(0, 100);
              if (typeof dataObj === 'object') {
                dataObj.y = newVal;
              } else {
                dataset.data[j] = newVal;
              }
            });
          });
          chart.update();
        }
      },
    ];

## # Docs

- Line
- Time Cartesian Axis