i really appreciate the services you guys are providing.
1) how can i edit the spacing between the horizontal bars? im having an issue changing the margin between the bars. the space between them are currently too wide.
2) can i give each date div & week div a fixed width value?
im currently displaying 6~8 charts on one page but the start date and end date for each charts are all different, thus the width of week & weekdays are different for every chart.
is the width of each date div / week div (see img below) responsive according to the start date and end date? or can i give it a value so that they remain constant regardless of the timeline.
3) id like to apply background color to every start of the chart section (see img below) & background color to every section of the chart during weekends( Sat, Sun). i applied visible: false for the yAxis because i wont be using it. i understand by giving it a false value, you cant apply a horizontal grid. do you reckon theres a way to apply a background color as shown below without giving the yAxis a false value?
here is my code:
Code: Select all
highchartsGantt(Highcharts);
const today = new Date();
const day = 1000 * 60 * 60 * 24;
const initialOptions = {
chart: {
type: 'gantt',
scrollablePlotArea: {
minWidth: 1500,
opacity: 1,
},
},
title: {
text: '',
},
credits: {
enabled: false,
},
xAxis: [
{
currentDateIndicator: true,
labels: {
style: {
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: '12px',
},
formatter: function (tooltip) {
const time = new Highcharts.Time(),
days = ['M', 'T', 'W', 'T', 'F'];
const color = days.some(
day => day === time.dateFormat('%E', this.value)
)
? '#3C6DBA'
: '#666666';
return `<span style="color: ${color}">${time.dateFormat(
'%E',
this.value
)}</span>`;
},
},
grid: {
borderWidth: 0,
cellHeight: 15,
},
tickInterval: day,
dateTimeLabelFormats: { day: '%E' },
},
{
grid: {
borderWidth: 0,
cellHeight: 15,
},
gridLineWidth: 1,
tickInterval: day * 7,
tickWidth: 1,
dateTimeLabelFormats: { week: '%b %e ' },
},
],
pathfinder: {
lineColor: '#0077C2',
marker: {
color: '#0077C2',
},
},
yAxis: {
visible: false,
},
series: [],
};
the first img is how i want the chart to look like and the second img is the chart ive currently made.