I'm facing an issue with the chart's x-axis configuration when in minutes. When the x-axis values are in milliseconds, the series inside the navigator displays correctly. However, when the x-axis is in minutes, the interval becomes very small, causing the series inside the navigator to not display.
Here are the fiddle examples illustrating the issue:
Fiddle with milliseconds (working)- https://jsfiddle.net/gopalsingh0707/2yzm0en1/22/
Highcharts.chart('container', {
chart: {
zoomType: 'x',
events: {
render: function() {
if (this.navigator) {
this.navigator.render();
}
}
}
},
title: {
text: 'Numeric X-Axis Labels with Custom Range Selector and Navigator'
},
xAxis: {
type: 'linear', // Ensure the x-axis is treated as numeric
title: {
text: 'Numeric Values'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 2); // Format with 2 decimal places
},
rotation: 0, // Rotation of labels
align: 'center', // Alignment of labels
style: {
fontSize: '10px', // Font size of labels
color: '#000000' // Color of labels
}
}
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Data',
data:
[[0.0, 0.062155798], [0.39999998, 0.36257562], [0.79999995, 0.9530556], [1.1999999, 1.03593], [1.5999999, 1.3881462], [1.9999999, 1.4710206], [2.3999999, 1.3674276], [2.7999997, 1.6056917], [3.1999998, 1.5435357], [3.6, 1.6160507], [3.9999998, 1.8232368], [4.3999996, 2.030422], [4.7999997, 2.196172], [5.2, 2.08222], [5.5999994, 2.113298], [5.9999995, 2.040782], [6.3999996, 2.123656], [6.7999997, 2.330842], [7.2, 2.341202], [7.5999994, 2.351562], [7.9999995, 2.5173101], [8.4, 2.299764], [8.799999, 2.38264], [9.2, 2.548388], [9.599999, 2.496592], [9.999999, 2.237608], [10.4, 2.237608], [10.799999, 2.289406], [11.199999, 2.310124], [11.599999, 2.040782], [11.999999, 2.08222]...]
type: 'line',
boostThreshold: 5000, // Boost module threshold
tooltip: {
valueDecimals: 2
},
// showInNavigator: true // Show in navigator
}],
navigator: {
enabled: true,
adaptToUpdatedData: true,
xAxis: {
type: 'linear', // Ensure the navigator x-axis is also numeric
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 2); // Match the main chart's format
}
}
},
series: {
dataGrouping: {
enabled: true
}
}
},
scrollbar: {
enabled: true,
}
});
Fiddle with min. (Not working)- https://jsfiddle.net/gopalsingh0707/j8yaf1nw/78/
Highcharts.chart('container', {
chart: {
zoomType: 'x',
events: {
render: function() {
if (this.navigator) {
this.navigator.render();
}
}
}
},
title: {
text: 'Numeric X-Axis Labels with Custom Range Selector and Navigator'
},
xAxis: {
type: 'linear', // Ensure the x-axis is treated as numeric
title: {
text: 'Numeric Values'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 2); // Format with 2 decimal places
},
rotation: 0, // Rotation of labels
align: 'center', // Alignment of labels
style: {
fontSize: '10px', // Font size of labels
color: '#000000' // Color of labels
}
}
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Data',
data:
[[0, 0.062155798], [0.000007, 0.36257562], [0.000013, 0.9530556], [0.00002, 1.03593], [0.000027, 1.3881462], [0.000033, 1.4710206], [0.00004, 1.3674276], [0.000047, 1.6056917], [0.000053, 1.5435357], [0.00006, 1.6160507], [0.000067, 1.8232368], [0.000073, 2.030422], [0.00008, 2.196172], [0.000087, 2.08222], [0.000093, 2.113298], [0.0001, 2.040782], [0.000107, 2.123656], [0.000113, 2.330842], [0.00012, 2.341202], [0.000127, 2.351562], [0.000133, 2.5173101], [0.00014, 2.299764], [0.000147, 2.38264], [0.000153, 2.548388], [0.00016, 2.496592], [0.000167, 2.237608], [0.000173, 2.237608], [0.00018, 2.289406], [0.000187, 2.310124], [0.000193, 2.040782], [0.0002, 2.08222], [0.000207, 2.196172], [0.000213, 2.134016]...]
,
type: 'line',
boostThreshold: 5000, // Boost module threshold
tooltip: {
valueDecimals: 2
},
// showInNavigator: true // Show in navigator
}],
navigator: {
enabled: true,
adaptToUpdatedData: true,
xAxis: {
type: 'linear', // Ensure the navigator x-axis is also numeric
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 2); // Match the main chart's format
}
}
},
series: {
dataGrouping: {
enabled: true
}
}
},
scrollbar: {
enabled: true,
}
});
Any help with resolving this issue would be greatly appreciated.
Thank you in advance!
I've tried with all possible navigator attributes such as Adjust x-axis Formatting, Set x-axis Type etc.
To solve this, disable dataGrouping for navigaor series: