Joining both waterfall and funnel charts
So far, we have explored both waterfall and funnel charts. Both types of chart have been used in sales data. In this section, we are going to join the previous waterfall and funnel examples together, so that when the client clicks on a horizontal bar (let's say Product B sales), the waterfall chart is zoomed into the funnel chart to show the prospect ratio of the product. To achieve that, we use the drilldown feature (described and demonstrated in Chapter 2, Highcharts Configurations).
First, we set the data point with a drilldown identifier, like productB
. Then, we import the whole funnel series configuration from the previous example into the drilldown option with the matching id
value. Finally, we relocate the drill up back button to the bottom of the screen. The final change should be as follows:
series: [{ type: 'waterfall', .... data: [{ .... }, {...