username000
Posts: 13
Joined: Tue Mar 01, 2022 4:26 pm

spacing between bars / fixed width / conditional background color

hey highchart,

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.
Attachments
Screen Shot 2022-03-04 at 3.35.58 AM.png
Screen Shot 2022-03-04 at 3.35.58 AM.png (76.72 KiB) Viewed 744 times
Screen Shot 2022-03-04 at 3.34.10 AM.png
Screen Shot 2022-03-04 at 3.34.10 AM.png (92.55 KiB) Viewed 744 times
username000
Posts: 13
Joined: Tue Mar 01, 2022 4:26 pm

Re: spacing between bars / fixed width / conditional background color

using the resource management chart fyi. thanks
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: spacing between bars / fixed width / conditional background color

Hi,

Thank you for your feedback, we really appreciate it!

1) 2) We don't have any property to change the cell/row width/height, but you can change them based on the solutions in the following topics:

Similar topics that might be helpful for you:
viewtopic.php?f=19&t=44014
viewtopic.php?t=41224
viewtopic.php?t=44149

3) I'm not sure if I understood correctly, but as a background, you can use plotBands with appropriate values' 'from' 'to' . To keep the yAxis.gridLines on the chart, I would recommend to disable a labels, and change tick and line colours to transparent.

Simplified demo:
https://jsfiddle.net/BlackLabel/tn2sae9h/

Let me know if that was what you were looking for,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Gantt”