I have an xrange chart with a big data array. The config is below:
Code: Select all
Options = {
chart: {
resetZoomButton: {
theme: {
display: 'none',
},
},
spacing: [0, 0, 0, -15],
animation: true,
type: 'xrange',
zoomType: 'x',
panning: {
enabled: true,
type: 'x',
},
panKey: 'shift',
events: {
selection(this: Highcharts.Chart) {
const chart = this;
chart.xAxis.forEach((axis) => {
axis.update({
minRange: 3600 * 1000,
});
});
return true;
},
},
},
series: [
{
type: 'xrange',
data: dataSeries as any,
dataLabels: {
enabled: true,
inside: true,
y: -18,
className: 'dataLabel',
},
selected: true,
},
],
credits: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
turboThreshold: 0,
dataLabels: {
enabled: true,
},
events: {
click(this: Series, event: any) {
},
},
},
},
xAxis: [
{
currentDateIndicator: {
color: '#FF6767',
label: {
format: 'Today',
},
},
},
{
dateTimeLabelFormats: {
month: '%B, %Y',
week: 'Week %W, %Y',
day: '%e %b %Y',
},
},
],
yAxis: [
{
scrollbar: {
enabled: true,
showFull: false,
liveRedraw: true,
},
max: ITEMS_PER_PAGE,
tickWidth: 1,
categories: dataCategories as any,
},
],
How can this be optimized so as not to damage key functionality? The scroll is made in such a way that the chart header does not go beyond the frame.