overlapped values in Stacked bar(xAxes + yAxes)

[Roman991]

Expected Behavior

Every bar shoud start at y = 0 and all bars (one per day) shoud have data appended
<----data1-----><--------data2---------><-------data3------> (vertical in the example)

Current Behavior

in this case u can see that bars are not continuous

Possible Solution

I also tried to fill all dates with y:0 and to change x to js Date Object and ISOString

Steps to Reproduce

link to reproduce
stack blitz

Context

Environment

• Chart.js version:
• Browser name and version:
• Link to your project:

[kurkle]

v2 uses index based stacking. v3 stack by value, so should work with chart.js@next

[Roman991]

it did the job, but it was a pain.

In angular's scope it was complaining about:

core.js:4197 ERROR Error: "category" is not a registered scale.
    at Registry._get (chart.esm.js:4347)
    at Registry.getScale (chart.esm.js:4313)
    at chart.esm.js:4739
    at each (core.js:49)
    at Chart.buildOrUpdateScales (chart.esm.js:4726)
    at Chart.update (chart.esm.js:4842)
    at new Chart (chart.esm.js:4633)
    at SafeSubscriber._next (stats-inserimenti.component.ts:102)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)

btw I found an ugly workaround to make it work, changing the scope to global
this.chart = new window.Chart(this.statsInserimento.nativeElement, this.config);

it's still an alpha so idk if u want to investigate

[kurkle]

Take a look at https://www.chartjs.org/docs/master/getting-started/v3-migration/

[Roman991]

I had to register manually all elements

import { Chart, LineController,Line, Point, LinearScale, CategoryScale, Title, Tooltip, Filler, Legend, BarController, Rectangle,} from 'chart.js';
Chart.register( LineController, Line, Point, LinearScale, CategoryScale, Title, Tooltip, Filler, Legend, BarController, Rectangle);

isn't it a bit tricky?

I had to inspect the dist file to find that type:'bar'needs the BarController and Rectangle to work.

btw THANK you!

here a working example
STACKBLITZ
...actually it's not working in stackbliz environment (async import?)

[kurkle]

I had to register manually all elements
isn't it a bit tricky?

It is, but thats the only way we could make tree shaking work while still using strings for type of dataset / scale / dataElementType / datasetElementType. More about that there: #7371

[23subbhashit]

try this:

xAxes: [{ stacked: true }],
  yAxes: [{
    stacked: false,
    ticks: {
      beginAtZero: true,
    },
  }]

[kurkle]

closing as resolved