Warm tip: This article is reproduced from stackoverflow.com, please click
highcharts

Is It possible to plot a water fall chart as shown in the below image?

发布于 2020-04-03 23:38:58

I need to plot a waterfall chart like below. In the chart, each column is a type of category and the value is calculated by adding the sub-types. How do we display the sub-types(ex: Gas 1, Gas 2) in the bottom and category(like Category 3) in the top. Is this possible in highcharts?

enter image description here

Questioner
Jomon
Viewed
61
分享
ppotaczek 2020-01-31 20:12

You can use two xAxis with categories. For example:

xAxis: [{
  opposite: true,
  lineWidth: 0,
  categories: ['Start', 'Category1', 'Category2', 'Category3', 'Category4', 'Balance']
}, {
  linkedTo: 0,
  lineWidth: 0,
  categories: ['', 'Sub-Category 1', 'Liquid 1<br>Liquid 2', 'Gas 1<br>Gas 2', 'Solid 1', ''],
  labels: {
    rotation: 0,
    y: -10
  }
}]

Live demo: https://jsfiddle.net/BlackLabel/a9bzeqw4/1/

API Reference: https://api.highcharts.com/highcharts/xAxis.labels

Jomon 2020-02-03 12:20:42

Thankyou. This is what I was looking for.!

Jomon 2020-02-03 16:45:20

How do I give a different color for the bar in the negative region and another color for the same bar in the positive region for isSum bar ?

ppotaczek 2020-02-03 17:46:16

You can use upColor: api.highcharts.com/highcharts/series.waterfall.upColor and negativeColor: api.highcharts.com/highcharts/series.waterfall.negativeColor properties.

Related issues

1
Only one highcharts using react-grid-layout can resize
2
How to prevent highcharts from shortening labels with ellipsis
3
not working to update node of network graph
4
Highchart maps / Highmaps update vue data properties on clicking country
5
Highcharts: Removing the legend Symbol that comes with marker
6
Highcharts Highmaps prevent initial zoom effect
7
How to format Highstock range slider date and time formatting
8
Higcharts population pyramid with csv data
9
How to give my own id to the container of High Chart in Yii
10
How to add distance/spacing between datalabels