Chartjs linechart with only one point - how to center

Question

I have a chartjs linechart diagram to show the sales of different products on a range of dates. The user can select a date range (for example from 2015-12-01 to 2015-12-10) to view the sales per day and thats fine and its working.

But if the user selects only one day (range from for example 2015-12-01 to 2015-12-01), he gets the correct diagram, but it doesn't look good:

As you can see, the points are stick to the y-axis. Is there a possibility, to center the points on the diagram?

Thats how it should look like:

score 28 · Answer 1 · edited Jul 04 '21 at 09:26

28

Instead of hardcoding the labels and values with blank parameters, use the offset property.

const options = {
  scales: {
    x: {
      offset: true
    }
  }
}

Documentation: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#common-options-to-all-cartesian-axes

edited Jul 04 '21 at 09:26

ndequeker

7,932
7
61
93

answered Dec 16 '19 at 09:13

Manhar Sapra

659
1
11
21

3

this seems to be the most correct answer without any hacks – tam5 Jan 15 '20 at 21:50
1

Does not work on ChartJS v2 or v3 – Balazs Nemeth Jan 05 '22 at 22:40

score 9 · Accepted Answer · answered Dec 12 '15 at 07:13

You can check the length of your labels (or data) arrays and add dummy non-renderable points to the left and right by using empty string labels and null value, like so

var chartData = {
  labels: ['', "A", ''],
  datasets: [
    {
      fillColor: "rgba(255, 52, 21, 0.2)",
      pointColor: "#da3e2f",
      strokeColor: "#da3e2f",
      data: [null, 20, null]
    },
    {
      fillColor: "rgba(52, 21, 255, 0.2)",
      strokeColor: "#1C57A8",
      pointColor: "#1C57A8",
      data: [null, 30, null]
    },
  ]
}

Fiddle - https://jsfiddle.net/pf24vg16/

I don't think you need the nulls and blanks. you just need to make sure the labels and data are arrays i.e. [value] — AGDM, May 02 '18 at 18:21

Benny Hinrichs · Answer 3 · 2018-02-21T11:52:16.190

Wanted to add to the above answer and say that I got a similar effect on a time series scatter plot using this:

if (values.length === 1) {
        const arrCopy = Object.assign({}, values);
        values.unshift({x: arrCopy[0].x - 86400000, y: null});
        values.push({x: arrCopy[0].x + 2 * 86400000, y: null});
}

That only handles for a single point, however. To add in functionality for multiple points, I did the following:

const whether = (array) => {
    const len = array.length;
    let isSame = false;
    for (let i = 1; i < len; i++) {
        if (array[0].x - array[i].x >= 43200000) {
            isSame = false;
            break;
        } else {
            isSame = true;
        }
    }
    return isSame;
}
if (values.length === 1 || whether(arr[0])) {
        const arrCopy = Object.assign({}, values);
        values.unshift({x: arrCopy[0].x - 86400000, y: null});
        values.push({x: arrCopy[0].x + 2 * 86400000, y: null});
}

You might notice I'm just subtracting/adding a day in milliseconds into the x values. To be honest, I was just having the worst of times with moment.js and gave up haha. Hope this helps someone else!

Note: my code has a tolerance of 43200000, or 12 hours, on the time. You could use moment.js to compare days if you have better luck with it than I did tonight :)

score 0 · Answer 4 · answered Nov 23 '18 at 13:15

For your specific problem, try to modify the options->scales->xAxes option like so:

options: {
      title: {
         display: true,
         text: 'mytitle1'
      },
      scales: {
         xAxes: [{
            type: 'linear',
            ticks: {
               suggestedMin: 0,
               suggestedMax: (11.12*2),
               stepSize: 1 //interval between ticks
            }
         }],

More info at: Chart JS: Ignoring x values and putting point data on first available labels

Chartjs linechart with only one point - how to center

4 Answers4

Linked