0

I am working on a highcharts project and need help with enabling scrollbar without using highstock js. As I understand highstock needs license, I wanted to see if there are any other options that anyone has tried. The chart is useless without scrollbar. I may have to look into other charting options which is a bummer as I really like highcharts. Thanks.

Here is my code -

(function(H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
var color = item.color;

item.color = item.options.legendColor;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
item.color = color;
});
}(Highcharts));

Highcharts.ganttChart('container', {
xAxis: [{
tickInterval: 1000 * 3600 * 24 * 30,
labels: {
format: '{value: %b}'
}
},
{
tickInterval: 1000 * 3600 * 24 * 90,
units: [
['month', [3]]
],
labels: {
align: 'center',
formatter: function() {
const label = this,
date = new Date(this.value),
year = date.toLocaleString('en', { year: "2-digit", }),
quarter = Math.floor(date.getMonth() / 3 + 1);

return `FY${year} Q${quarter}`;
}
}
}
],
legend: {
enabled: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.label}'
}
}
},
series: [{
name: 'Everyone',
legendColor: '#ffe699',
data: [{
name: 'Annual',
label: 'Training 1',
color: '#ffe699',
start: Date.UTC(2023, 7, 1),
end: Date.UTC(2023, 8, 2)
},
{
name: 'One Time',
label: 'New Managers Training Test2',
color: '#9bc2e6',
start: Date.UTC(2023, 2, 1),
end: Date.UTC(2023, 2, 2)
},

{
name: 'One Time',
label: 'New Managers Training Test2',
color: '#9bc2e6',
start: Date.UTC(2022, 9, 1),
end: Date.UTC(2022, 10, 2)
},

{
name: 'One Time',
label: 'New Managers Training Test3',
color: '#9bc2e6',
start: Date.UTC(2022, 10, 1),
end: Date.UTC(2022, 11, 2)
},

{
name: '2 Years',
label: 'Training 2',
color: '#ffe699',
start: Date.UTC(2023, 6, 9),
end: Date.UTC(2023, 8, 19)
}]
}, {
name: 'Menagers',
legendColor: '#9bc2e6',
data: [{
name: 'Annual',
color: '#9bc2e6',
label: 'Training 1',
start: Date.UTC(2023, 9, 10),
end: Date.UTC(2023, 11, 23)
}]
}]
});
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

<div id="container"></div>
newuser
  • 245
  • 1
  • 1
  • 8
  • There have been threads with this question on SO already: https://stackoverflow.com/q/60069393/20240133 https://stackoverflow.com/q/56685715/20240133 – Michał Mar 09 '23 at 10:05

0 Answers0