squezac
Posts: 1
Joined: Wed Sep 01, 2021 2:26 pm

bars out of place help

Hi friends, this is the first time I need your help, I have a gantt chart but the project bars are out of place, please help.
Image

Code: Select all

Highcharts.ganttChart('container', {
	chart: {

  	events: {
    	load: function() {
      	var chart = this,
        	series = chart.series[0];
        
        series.points.forEach(function(point) {
          point.graphic.translate(0, -25);
        });
      }
    }
  },
  title: {
    text: 'Casos Activos'
  },
  yAxis: {
    //uniqueNames: true,
    scrollbar: {
            enabled: true,
            showFull: false
        },
        max: 8,
    breaks: [{
    	breakSize: 0.5,
      from: 0,
      to: 0
    }]
  },
  navigator: {
        enabled: true,
        liveRedraw: true,
        series: {
            type: 'gantt',
            pointPlacement: 0.5,
            pointPadding: 0.25
        },
        yAxis: {
            min: 0,
            max: 3,
            reversed: true,
            categories: []
        }
    },
    scrollbar: {
        enabled: true
    },
    rangeSelector: {
        enabled: true,
        selected: 0
    },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
                    name: 'Auditoria',
                    data: myObj // <-- push array into the data element
                }]
});
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: bars out of place help

Hi,
Welcome to our forum and thanks for contacting us with your question.

The reason the points are moved is that in the events.load() event, you move all the points in the 0 series by -0.25, which is up (task a, b, c).

Code: Select all

  chart: {
    events: {
      load: function() {
        var chart = this,
          series = chart.series[0];

        series.points.forEach(function(point) {
          point.graphic.translate(0, -25);
        });
      }
    }
  },

Another thing is you are using breaks, but what do you want to achieve?
Here is an example of how to use translate points and yAxis.breaks them together.
https://api.highcharts.com/gantt/navigator.yAxis.breaks
https://jsfiddle.net/BlackLabel/4dxzcpgy/

Live demo:
https://jsfiddle.net/BlackLabel/x8ybj7pk/

If you have any questions about this you can reach me any time.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”