Chartjs, plot data based with unequal time intervals

Question

I'm plotting a graph with chartjs where the x-axis represents time and the y-axis the corresponding data.

Now i got data for today, last week, last month and last year.

var myLineChart = new Chart(ctx).Line(data, options); var data = { labels: ["last year", "last month", "last week", "today"], datasets: [ { label: "My First dataset", data: [80, 81, 56, 40] } ]

};

When i plot the graph, the distance between every point is the same. But this is not correct because the time intervals are not the same.

The distance between 'last year' and 'last month' should be bigger than the distance between 'last week' and 'last month'.

Anyone an idea how i can achieve a this with chartjs, when i look at the documentation i don't see any options for this.

tachycline · Accepted Answer · 2015-05-13 13:39:08Z

You have to use an extension to chart.js that has data for both x and y values in the data structure. One that I found is Chart.Scatter.

The longer explanation is that by default, the labels you use in chart.js are just labels; they don't get parsed into any kind of x values.

Jonathan Lin · Accepted Answer · 2018-06-12 04:30:24Z

You can use the Chart.js scatter chart type (https://www.chartjs.org/docs/latest/charts/scatter.html). Also remember to set showLine: true in the datasets options.

I found that this resulted in gaps at the start and end of the x axis. You can feed in the min and max ticks for x axis as follows:

scales: { xAxes: [ { display: false, ticks: { max: maxX, min: minX } } ], yAxes: [ { display: false } ] }

Collectives™ on Stack Overflow

Chartjs, plot data based with unequal time intervals

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related