Chartjs-Chart.js mixed chart : Lines not starting at zero

by

0👍

✅

That is cause you setted stacked to true.

scales: {
  yAxes: [{
      stacked: **false**,
      ticks: {
        beginAtZero: true
      }
    }

  ],

  xAxes: [{

      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }

  ]

}

EDIT:

Second thought coming from => https://www.chartjs.org/docs/latest/charts/mixed.html

At this point we have a chart rendering how we’d like. It’s important to note that the default options for a line chart are not merged in this case. Only the options for the default type are merged in. In this case, that means that the default options for a bar chart are merged because that is the type specified by the type field.

I found a solution!

Just add this :

myChart.options.scales.xAxes[0].offset = false;
myChart.update();

The only counterpart is that if there’s data @ index 0 of a bar dataset, it will be only half drawn and the last one as well as shown here : https://jsfiddle.net/0qsh8znu/1/

0👍

I had the same issue. When I followed @rOulito ‘s solution, I found that the lack of offset for my line graph made it no longer line up with the data points of my bar graph, so that didn’t work, sadly.

My solution was to follow the docs for a chartjs plugin for annotations

This is how I drew a line from the first data point of my line graph to the bottom left of the graph:

let options = {
    plugins: {
      annotation: {
        annotations: {
          line1: {
            type: 'line',
            yMax: 50000,
            xMax: 0,
            borderColor: 'black',
            borderWidth: 3,
          },
        },
      },
    },
  };

Leave a comment