In my current angular 11 project, I have the following dependencies listed in my package.json file:
"dependencies": {
...
"highcharts-angular": "^2.10.0",
...
My goal is to display a chart with dates on the x-axis and numbers on the y-axis grouped using the sum approximation.
Despite configuring the dataGrouping options as usual, the chart displays all the data without any grouping when rendered. I've experimented with adjusting the groupPixelWidth parameter without success.
Highcharts: typeof Highcharts = Highcharts;
highChart!: Highcharts.Chart | null;
...
chartOptions: Options = {
...
plotOptions: {
series: {
dataGrouping: {
approximation: 'sum',
smoothed: false,
enabled: true,
groupPixelWidth: 2,
dateTimeLabelFormats: {
millisecond: [
'%A, %b %e, %H:%M:%S.%L', '%A, %b %e, %H:%M:%S.%L', '-%H:%M:%S.%L'
],
second: ['%A, %b %e, %H:%M:%S', '%A, %b %e, %H:%M:%S', '-%H:%M:%S'],
minute: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
hour: ['%A, %b %e, %H:%M', '%A, %b %e, %H:%M', '-%H:%M'],
day: ['%A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
week: ['Week from %A, %b %e, %Y', '%A, %b %e', '-%A, %b %e, %Y'],
month: ['%B %Y', '%B', '-%B %Y'],
year: ['%Y', '%Y', '-%Y']
},
units: [
['millisecond', []],
['second', []],
['minute', [30]],
['hour', [1, 6, 12]],
['day', [1]],
['week', null],
['month', null],
['year', null]
]
}
}
},
If you're interested in delving deeper into the codebase, feel free to explore this public GitHub repository. Please note that there may be unresolved merge conflicts within the repository.