Drilldown Chart

Drill down chart. Our drill down chart provide an in-depth and detailed view of your chart. Highcharts provide our drill down effect on the pie chart so you can get more details into your chart. So if you see in browser, we have nice interactive donut chart with drill down effect. In this chart you can see JavaScript framework used by developers worldwide.

So now the question comes, what is drilled down here? So you can see, we have JQuery, Reactjs, Vuejs, and Angular. So if user click on Angular you will get all versions list and percentage of users who are using this particular versions. This is not a real data. The purpose of the chart is to show you a chart. So you can understand about the drill down effect.

You can see, once you click on Angular, automatically in the top right corner back button is there. If user click on this button, it will redirect you to main chart. So this is called a drill down effect.

Now see the code section. If you see the code, here I have added two dependency. First is Highcharts more, second one is drill down. So here chart type is pie. In the Highcharts if we want to make a chart as donut chart, you can set here in the plot options. Pie and our size. So based on inner size, you can increase and decrease their donut size.

You can see donut is increasing and decreasing based on values. So this part is required to make a chart as donut chart. Now see the series section. Here we have list of JavaScript frameworks. And then down, we have drill down series. So before looking this far, you can see in the first main series section for Angular we have drill down property. Here we set one unique name.

Now see the drill down series section, see the ID. So this ID and main series section drill down name will be seen. And in the data section we can set the related data. So whenever a user click on Angular from the main cities and then from this drill down and based on this ID it was show this data.

So this ID and main series section drill down name will be the same. And in the data section we can search related data. So whenever user click on Angular from the main series and then from this drill down and based on this ID it will show this data. For running this chart right in the terminal window, you can see we have nice interactive drill down chart.