# Drill down on charts **URL:** \ **Category:** Kibana\ **Created:** [July 22, 2017, 12:50am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178 "2017-07-22T00:50:26Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![patrickian](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@patrickian](https://discuss.elastic.co/u/patrickian)\ **Post date:** [July 22, 2017, 12:50am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/1 "2017-07-22T00:50:26Z")
Is there a way in kibana to do a drill down function on charts? I'm trying to create a pie chart that when a part of the chart is clicked, it will show what makes that part up. let's say I sub bucket my data by "groups" and those "groups" are made up of "members". What I want to do is that when I click a group, the chart changes to one that is now made up of members of this group. The closest I've done is to have separate charts. When the first one is filtered, the second one is filtered as well. Splitting the first chart by groups and then splitting them again doesn't look too clean. Is there a way to achieve this? ---
**Author:** ![patrickian](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@patrickian](https://discuss.elastic.co/u/patrickian)\ **Post date:** [July 22, 2017, 11:18pm UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/2 "2017-07-22T23:18:38Z")
anyone? ---
**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\ **Post date:** [July 24, 2017, 5:04pm UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/3 "2017-07-24T17:04:05Z")
> The closest I've done is to have separate charts. When the first one is filtered, the second one is filtered as well. Splitting the first chart by groups and then splitting them again doesn't look too clean. That's the best you're going to get with the native pie chart visualizations. There's no way to attach custom click logic to pie charts (or any other charts), they simply allow you to filter on values and change colors. What you'd need to do to achieve the interaction you want is to both apply a filter and also change the aggregation. You could probably write a custom vis plugin that would give you this, or one may exist, but Kibana won't do this out of the box. ---
**Author:** ![patrickian](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@patrickian](https://discuss.elastic.co/u/patrickian)\ **Post date:** [July 25, 2017, 1:00am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/4 "2017-07-25T01:00:50Z")
How would I be able to make a custom visualization? Is there a documentation or resource teaching how to do this? ---
**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\ **Post date:** [July 25, 2017, 3:40pm UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/5 "2017-07-25T15:40:57Z")
Sadly, documentation is pretty much non-existent, but you can take a look at the Kibana codebase to see how those visualizations work. [Kibana is mostly a collection of plugins](https://github.com/elastic/kibana/tree/master/src/core_plugins) written against a common core. There's also a number of [external plugins](https://www.elastic.co/guide/en/kibana/current/known-plugins.html) in the wild that you can look through too. To help you bootstrap a plugin, check out the [plugin template](https://github.com/elastic/template-kibana-plugin/). ---
**Author:** ![patrickian](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@patrickian](https://discuss.elastic.co/u/patrickian)\ **Post date:** [July 26, 2017, 7:29am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/6 "2017-07-26T07:29:14Z")
Can I make the plugin similar to a visualization? As I can see, the plugin appears as a separate tab in the kibana menu. Is there a way to put it under visualizations? I want reporting to be able to pick it up too. ---
**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\ **Post date:** [July 26, 2017, 5:15pm UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/7 "2017-07-26T17:15:52Z")
Sure can. If you look in the [core plugins](https://github.com/elastic/kibana/tree/master/src/core_plugins) in Kibana, you can see that Markdown, Tilemap, and Table vis are themselves plugins. In fact, all of the visualizations in Kibana are plugins, and you can add your own by using the visualization registry. And as mentioned, there's a [bunch of external vis plugins too](https://www.elastic.co/guide/en/kibana/current/known-plugins.html#_visualizations). Everything is open source, so you can see how they all work by looking at the code. If we, for example, look at the table vis for how to do this, we see that in the main [index.js](https://github.com/elastic/kibana/blob/master/src/core_plugins/table_vis/index.js) file, it specifies a `visTypes` property with an array of files to load. Here, `plugins/table_vis/table_vis` maps to the local path of [public/table\_vis](https://github.com/elastic/kibana/blob/master/src/core_plugins/table_vis/public/table_vis.js). Looking in that file, notice the use of `ui/registry/vis_types`, which is used to register the table vis provider. All visualizations work this way, so you can dig through there and see what is required. So effectively, when you create your plugin, you just need to do the same things you see other vis plugins doing. ---
**Author:** ![patrickian](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@patrickian](https://discuss.elastic.co/u/patrickian)\ **Post date:** [July 27, 2017, 9:09am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/9 "2017-07-27T09:09:02Z")
So, I created a custom application and I've successfully imported highcharts. As usual, I'll be querying elasticsearch from this plugin and it would be handy to have the timepicker from the upper right corner when I'm on the Discover, Visualize, Dashboard... etc... windows. Is there a way to enable this on my custom plugin? If so, how do I get the values from them? I'm basically following the guide [here](https://www.timroes.de/2016/02/21/writing-kibana-plugins-custom-applications/) but I still find it confusing. Can you shed some light on some of the complex concepts? Like, what's the difference between the kibana API and the elasticsearch API? Will I be able to perform complex queries (using aggregates, multiple conditions, grouping and ordering) now that I'm using a custom plugin? ---
**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\ **Post date:** [July 27, 2017, 5:04pm UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/10 "2017-07-27T17:04:56Z")
> Like, what's the difference between the kibana API and the elasticsearch API? There is no Kibana API, so I'm not sure what you're asking. All communication happens against Elasticsearch. As mentioned in that tutorial, you'll likely want to use `server.plugins.elasticsearch.callWithRequest` to do that communication. All `callWithRequest` does is take the request object, and use it to talk to Elasticsearch. This is useful and important to be able to enforce authentication. > Will I be able to perform complex queries (using aggregates, multiple conditions, grouping and ordering) now that I'm using a custom plugin? Yes, `callWithRequest` is basically a passthrough for the [javascript Elasticsearch client](https://github.com/elastic/elasticsearch-js/) (which passes along auth data, as mentioned). So anything you can do with that library, you can do with that helper. You can also write custom methods that you can plug in to the client, but I'll tell you from experience that that part of it is tricky to understand (I still don't get it myself). As an example, from that tutorial, `server.plugins.elasticsearch.callWithRequest(req, 'cluster.state', {...})` is calling the [cluster.state method](https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/api-reference.html#api-cluster-state) and the object as the 3rd argument gets passed to that method as the `params`. Anything in the ES-JS client can be used this way, and the API docs there are pretty thorough. As for accessing the timepicker data... I don't know offhand. I'll admit I've only ever written APIs and other functionality as plugins, I've never tried to build a visualization. Most visualizations simply use the "courier", which is an abstract way to query Elasticsearch, something I've learned a little in the past, but no longer understand. I believe the courier takes the timepicker value into account, so if you use something else, you have to pull that value yourself. I dug through and got a little guidance, and learned that there's a timepicker service that provides that information. The new time series visualizations do this, and you can see the code that does it here: [https://github.com/elastic/kibana/blob/master/src/core\_plugins/metrics/public/kbn\_vis\_types/request\_handler.js](https://github.com/elastic/kibana/blob/master/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js) ---
**Author:** ![patrickian](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@patrickian](https://discuss.elastic.co/u/patrickian)\ **Post date:** [July 28, 2017, 10:29am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/11 "2017-07-28T10:29:44Z")
Is there something in kibana disabling the drilldown in highcharts? I've copied the code exactly as is from [here](https://www.highcharts.com/demo/pie-drilldown) and the drill down function doesn't work. Any ideas why? Edit: OK, so I've found out that it requires drilldown.js. I've imported it using import 'highcharts/modules/drilldown' but still doesn't work. ---
**Author:** ![Joe\_Fleming](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joe_fleming/32/3561_2.png) [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)\ **Post date:** [July 28, 2017, 4:44pm UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/12 "2017-07-28T16:44:43Z")
I don't believe so. I know the core visualizations handle click events, but if you're not wrapping yours up in that implementation (and I can't imagine why you would be), it shouldn't matter to you at all. If you do a little debugging, do you see the click event registering on your visualization? ---
**Author:** ![patrickian](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@patrickian](https://discuss.elastic.co/u/patrickian)\ **Post date:** [July 29, 2017, 3:01am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/13 "2017-07-29T03:01:39Z")
Yeah, you're right. Click events are registering. I was missing a JS library that adds events on click functions. Thanks. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [August 26, 2017, 3:01am UTC](https://discuss.elastic.co/t/drill-down-on-charts/94178/14 "2017-08-26T03:01:46Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.