[ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.
Current and expected behavior
In actual scenario the app paint three accumulated bar charts, in vue 3, composition API so with same dataset wich is a three objects with this aspect:
I'm also using a pivot library to accumulate the cpu consumption for a exact time in the same label of the chart
Example, I'll shorten the dataset array to make it simpler. The app recieve N numbers of datasets to paint ->
With these data google chrome display the charts with the expected values correctly the opposite of Mozilla Firefox that mix labels and display the chart with none sense, how this could be?, and how can I get the result of the chrome displaying the charts tha same way in avery browser?
Would you like to work on a fix?
Current and expected behavior
In actual scenario the app paint three accumulated bar charts, in vue 3, composition API so with same dataset wich is a three objects with this aspect:
export interface IItem { labels: string[]; datasets: Dataset[]; }
export interface Dataset { label: string; data: number[]; barThickness: number; borderRadius: number; backgroundColor: string; }
I'm also using a pivot library to accumulate the cpu consumption for a exact time in the same label of the chart Example, I'll shorten the dataset array to make it simpler. The app recieve N numbers of datasets to paint ->
{ "labels": [ "09:15", "09:20", "09:25", "09:35", "09:40", "09:45", "09:55", "10:05", "10:10", "10:15", "10:20", "10:25", "10:40", "11:00", "11:05", "11:10", "11:15", "11:20", "11:25", "10:30", "10:35", "10:45", "10:50", "10:55", "07:00", "07:05", "07:55", "08:00", "08:05", "08:15", "08:20", "08:25", "08:35", "08:40", "07:10", "07:15", "07:20", "07:25", "07:30", "07:35", "07:40", "07:45", "07:50", "08:10", "08:30", "08:45", "08:50", "08:55", "09:00", "09:05", "09:10", "09:30", "09:50", "10:00", "06:35", "06:40", "06:50" ], "datasets": [ { "label": "mtr_definicion", "data": [ 509, 4, 18, 8, 7, 18, 8, 8, 2289, 26, 19, 6, 5, 5, 6, 12, 13, 13, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], "barThickness": 12, "borderRadius": 5, "backgroundColor": "#B1D1C9" }, { "label": "seg_usuario", "data": [ 0, 0, 0, 0, 0, 0, 0, 518, 10, 16, 51, 88, 21, 0, 0, 29, 37, 8, 15, 42, 17, 14, 12, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], "barThickness": 12, "borderRadius": 5, "backgroundColor": "#D2FC2F" }, } ] }
With these data google chrome display the charts with the expected values correctly the opposite of Mozilla Firefox that mix labels and display the chart with none sense, how this could be?, and how can I get the result of the chrome displaying the charts tha same way in avery browser?
charts in Mozilla :
charts in Chrome:
Reproduction
https://github.com/enlazoCtrl/charts here is the two vue classes that uses the charts
chart.js version
^4.3.1
vue-chartjs version
^5.2.0
Possible solution
No response