CODEWITHSUNDEEP
javascripthighcharts
strange_098
strange_098

Reputation: 1361

How to start column of waterfall chart from zero

I have a waterfall chart working, but I need that penultimate column start at zero.

I think I need to create a dummy point that hide and set Axis.min on the second point y position, but I can't put this working.

enter image description here

chart: {
  type: 'waterfall'
},
title: {
  text: ''
},
exporting: {
  enabled: false
},
credits: {
  enabled: false
},
//colors: ['#DADBDF', '#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#D7EAFD','#D7EAFD','#D7EAFD' ],
xAxis: {
  lineColor: '#FFFFFF',
  lineWidth: 0,
  gridLineColor: '#DADBDF',
  categories: [],
},
yAxis: {
  lineColor: '#FFFFFF',
  lineWidth: 0,
  gridLineColor: '#DADBDF',
  plotBands: [{
    color: '#000000', 
    from: 0, 
    to: 0 
  }],
  title: {
    text: ''
  },
},
legend: {
  enabled: false
},
plotOptions: {
  column: {
    dataLabels: {
      enabled: true,
      color: '#000000'
    },
    colorByPoint: true,
    pointWidth: 150
  },
  series: {
    borderWidth: 0,
    dataLabels: {
      enabled: true,
      format: '{point.y}'
    },
    turboThreshold: 0,
    label: {
      enabled: false
    }
  }
},
series: [{
  data: [],
  showInLegend: false,
}],

Upvotes: 0

Views: 566

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You can add another waterfall series with defined x values:

Highcharts.chart('container', {
    chart: {
        type: 'waterfall'
    },
    ...,
    plotOptions: {
        series: {
            grouping: false
        }
    },
    series: [{
        data: [...]
    }, {
        data: [{
            y: 569000,
            x: 5
        }, {
            y: 1569000,
            x: 6
        }]
    }]
});

Live example: https://jsfiddle.net/BlackLabel/qc07y5kf/

API Reference: https://api.highcharts.com/highcharts/series.waterfall.data

Upvotes: 1

Related Questions