How to make a plot band on a single row in Highcharts Gantt?

SixtyEight 0
Viewed 45

I have a Gantt chart and I wanna plot a band only on a specific row. On my example below it displays on every row.

enter image description here

It can be a band plot or something similar (eg: SVG, bar, ...). As long as can control easily the position with start and end in time since I'll have a few for over 30 rows in different positions.

Here's a fiddle

And my code:

// THE CHART



Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['1', '2']
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  xAxis: {
  plotBands: [{
      color: '#B3D1AE', // Color value
      from: Date.UTC(2014, 10, 21), // Start of the plot band
      to: Date.UTC(2014, 10, 22) // End of the plot band
    }],
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
      x: Date.UTC(2014, 10, 25, 16),
      y: 0,
      custom: {
        label: 3
      }
    }, {
      x: Date.UTC(2014, 10, 29),
      y: 0,
      custom: {
        label: 4
      }
    }]
  }, {
  type: 'line',
  zoneAxis: 'x',
  data: [{
      x: Date.UTC(2014, 10, 25, 16),
      y: 1,
      custom: {
        label: 3
      }
    }, {
      x: Date.UTC(2014, 10, 29),
      y: 1,
      custom: {
        label: 4
      }
    }]
  }]
});
highcharts-gantt highcharts gantt-chart charts javascript
1 Answers

You can use SVG.Renderer to draw the "plotBands" and axis.toPixels() method to control the position.

Example:

  chart: {
    events: {
      load() {
        let from = this.xAxis[0].toPixels(Date.UTC(2014, 10, 21)),
          to = this.xAxis[0].toPixels(Date.UTC(2014, 10, 22)),
          width = to - from,
          rowStart = this.yAxis[0].toPixels(0.5),
          rowHeight = this.yAxis[0].toPixels(1) - this.yAxis[0].toPixels(0);

        this.renderer.rect(from, rowStart, width, rowHeight)
          .attr({
            fill: '#ff0000',
            zIndex: 0
          }).add()
      }
    }
  }

Demo: https://jsfiddle.net/BlackLabel/qbo8Lmy6/

API References: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

magdalena0
Related