CODEWITHSUNDEEP
chart.js
bernhardh
bernhardh

Reputation: 3309

Chartjs linechart with only one point - how to center

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:

enter image description here

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:

enter image description here

Upvotes: 14

Views: 16517

Answers (4)

Manhar Sapra
Manhar Sapra

Reputation: 719

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

Upvotes: 31

TomoMiha
TomoMiha

Reputation: 1279

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

Upvotes: 0

Benny Hinrichs
Benny Hinrichs

Reputation: 1646

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 :)

Upvotes: 0

potatopeelings
potatopeelings

Reputation: 41065

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/

Upvotes: 9

Related Questions