CODEWITHSUNDEEP
chart.js
rowanwins
rowanwins

Reputation: 253

Working with multiple date axes in ChartJS

I'm trying to setup a chart with 2 datasets, 1 as a line which will show a median value for a month, and 1 dataset as a scatterplot which shows the value on a certain day. The daily date doesn't need to be shown on the x axis.

I'm using dayjs as my time formatting library elsewhere within my app so I was trying to use the chartjs-adapter-dayjs-3 library.

I'm happy to manage the construction of the x,y objects myself for the data.

I've set up a codepen showing what I think should work but I'm just getting a blank chart at the moment so I'm obviously doing something wrong.

import dayjs from "https://cdn.skypack.dev/[email protected]";
import * as chartjsAdapterDayjs from "https://cdn.skypack.dev/[email protected]";


const ctx = document.getElementById("myChart");
const today = dayjs()

const myChart = new Chart(ctx, {
  data: {
    datasets: [
      {
        label: "Median Sales",
        data: [
          {x: today, y: 10},
          {x: today.add(1, 'month'), y: 20}, 
          {x: today.add(2, 'month') , y: 15}
        ],
        type: "line",
        xAxisID: 'x1'
      },
      {
          label: 'Individual Sales Prices',
          data: [{x: today, y: 8}],
          type: 'scatter',
          xAxisID: 'x2'
        }
    ]
  },
  options: {
    scales: {
      x1: {
        type: 'time',
        time: {
           unit: 'month'
        }
      },
      x2: {
        type: 'time',
        time: {
           unit: 'day'
        }
      }
    }
  }
});

I'm finding it a little unclear as to how time-based data, and axes ought work at the moment so any help would be appreciated.

Desired Layout

Example

Upvotes: 1

Views: 1161

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31341

The issue you are getting is because of 2 things. The first thing is that you are not using the date adapter your say you are using. You are using another one and importing it with skypack which has the big side effect of also import Chart.js itself. The version of Chart.js that skypack imports is version 2.

The lib that you are linking does not seem to have a build available that works out of the blue in your browser even with their example using script tags. So if you want to use day.js you will need to write your own date adapter.

Example of just using js dates and using the date-fns date adapter:

let start = new Date(),
  end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.

new Chart(document.getElementById("lastSevenDaysOverview"), {
  type: "line",
  data: {
    datasets: [{
        label: 'Dataset 1',
        data: [{
          x: new Date('10-16-2021'),
          y: 1
        }, {
          x: new Date('10-18-2021'),
          y: 4
        }, {
          x: new Date('10-19-2021'),
          y: 66
        }],
        borderColor: '#ff3366',
        backgroundColor: '#ff3366',
      },
      {
        label: 'Dataset 2',
        data: [{
          x: new Date('10-16-2021'),
          y: 31
        }, {
          x: new Date('10-18-2021'),
          y: 14
        }, {
          x: new Date('10-19-2021'),
          y: 6
        }],
        borderColor: '#880000',
        backgroundColor: '#880000'
      }
    ]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: true,
    },
    responsive: true,
    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
      },
      x: {
        type: "time",
        time: {
          unit: "day"
        }
      }
    },
  }
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Upvotes: 1

Related Questions