In actual scenario the app paint three accumulated bar charts, in vue 3, composition API so with same dataset using a pivot object like this one let pivot = new Pivot(initalDataSet, ['quien'], ['cuando'], 'cuanto', 'sum') wich is a three objects with this aspect:
Example, I'll shorten the dataset array to make it simpler. The app recieve N numbers of datasets to paint, so after using the pivot object one of the arrays in Mozilla Firefozx looks like this ->
The problem is that after setting the requested data from the database, with the same pivot dataset object, Mozilla Firefox mix the positions of the array and Google chrome leave them intact.
After this the chart shows well in google chrome and wrong in Mozilla, The question is how can I achieve the expected effect as Google chrome does in Mozilla Firefox?
In actual scenario the app paint three accumulated bar charts, in vue 3, composition API so with same dataset using a pivot object like this one let pivot = new Pivot(initalDataSet, ['quien'], ['cuando'], 'cuanto', 'sum') 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; }
Example, I'll shorten the dataset array to make it simpler. The app recieve N numbers of datasets to paint, so after using the pivot object one of the arrays in Mozilla Firefozx looks like this ->
0: "agestc" 1: Array [ {…} ] 2: Array [ {…} ] 3: Array [ {…} ] 4: Array [ {…} ] 5: Array [ {…} ] 6: Array [ {…} ] 7: Array [ {…} ] 8: Array [ {…} ] 9: Array [ {…} ] 10: Array [ {…} ] 11: Array [ {…} ] 12: Array [ {…} ] 13: Array [ {…} ] 14: Array [ {…} ] 15: "" 16: "" 17: "" 18: "" 19: "" 20: "" 21: "" 22: "" 23: "" 24: "" 25: "" 26: "" 27: "" 28: "" 29: "" 30: "" 31: "" 32: "" 33: "" 34: "" 35: "" 36: "" 37: "" 38: "" 39: "" 40: "" 41: "" 42: "" 43: "" 44: "" 45: "" 46: "" 47: "" 48: "" 49: "" 50: "" 51: "" 52: "" 53: "" 54: "" 55: "" 56: "" 57: "" 58: "" 59: "" 60: "" 61: "" length: 62
In Google chrome looks like this ->
0: "agestc" 1: "" 2: "" 3: "" 4: "" 5: "" 6: [{…}] 7: "" 8: "" 9: "" 10: "" 11: "" 12: "" 13: "" 14: "" 15: "" 16: "" 17: "" 18: [{…}] 19: "" 20: [{…}] 21: "" 22: "" 23: "" 24: [{…}] 25: [{…}] 26: [{…}] 27: "" 28: "" 29: "" 30: [{…}] 31: [{…}] 32: "" 33: "" 34: "" 35: "" 36: [{…}] 37: "" 38: "" 39: "" 40: [{…}] 41: "" 42: [{…}] 43: [{…}] 44: "" 45: "" 46: "" 47: "" 48: "" 49: "" 50: "" 51: "" 52: "" 53: "" 54: [{…}] 55: "" 56: "" 57: "" 58: [{…}] 59: "" 60: "" 61: "" length: 62
The problem is that after setting the requested data from the database, with the same pivot dataset object, Mozilla Firefox mix the positions of the array and Google chrome leave them intact. After this the chart shows well in google chrome and wrong in Mozilla, The question is how can I achieve the expected effect as Google chrome does in Mozilla Firefox?
charts in Mozilla :
charts in Chrome:
Reproduction
https://github.com/enlazoCtrl/charts here is the two vue classes that uses the quick-pivot library