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.

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.

• javascript
• graph
• chart.js

Share Improve this question Follow asked May 13, 2015 at 13:22 mgoubertmgoubert 32311 gold badge55 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

You can use the Chart.js scatter chart type (https://www.chartjs/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
    }
  ]
}