Charts plugin or @elastic/charts

Elastic Stack Kibana
1

Hi,

I am creating an external plugin in Kibana 8.8.1 using React.

I want to create charts inside my plugin. I expect them to be clickable and also just like in Kibana, when I click on a particular chart item (like bar of a bar graph), rest of the charts within the page should get updated automatically (the selected bar before gets applied as filter.... as in Kibana dashboards).

I found both @elastic/charts(Elastic UI) and charts-plugin(List of Kibana plugins | Kibana Guide [8.8] | Elastic).

Which of them would be the right option?
According to my understanding for now, I would have to use @elastic/charts for building the charts and charts-plugin for styling and theming of the same. Please correct me if wrong.

Also, how can I apply filter to all the visualizations on a page, based on clicks on any of the chart items (as I had mentioned above)?

Thanks

2

Hi, your understanding is correct: you should use @elastic/charts to build your charts and the charts-plugin to style/theme it.
You are not forced to do so, but in that way you can at least get some common styling of your charts with the rest of kibana.

Unfortunately is not that easy to integrate with the rest of Kibana, like applying a filter. These actions are called uiAction, you can get the interface that is required to send to apply a filter from here src/plugins/data/public/actions/value_click_action.ts.
I will take a look if I can find an easy example for you

2 Likes
3

Hi,

Thanks for the reply.
I was able to make charts using @elastic/charts

And regarding filter application, I do not want to integrate with whole Kibana. I just want to have a filter functionality similar to the one used in Kibana dashboards. Meaning, let's say I have 3 visualizations in plugin page (based on student data). Now when I click on let's say student gender pie chart-female, a filter with gender:female should get applied and reflect in all the visualizations in that page. So, all the visualizations in the page will now have filter gender:female applied to it.

One of my understanding is, is to create an onClick handler for each of the chart parts... like the different pie in pie chart, bars in bar chart, etc.... and then according to the part that received that was clicked, give in a filter, which will be applied to the data. This should then trigger all the visualizations to get updated.

This approach should work... but I think it m8 be unnecessary complexity.
I was hoping, may be EUI or @elastic/charts has a better approach , or there m8 be any existing plugins or services to help with the same.

Thanks

4

Actually EUI and elastic/charts are two libraries with low to zero knowledge of kibana and its internals.
Unfortunately, interaction system is very tied with the rest of Kibana and its data processing.
Can I ask you what are you trying to achieve that the current set of charts provided by Lens are not able to solve?

1 Like
5

Rather than creating a dashboard inside Kibana/Analytics/Dashboard, I want to create a mini dashboard inside my plugin.

Something like below:

image
image1003×654 56.2 KB


So here, when I click on any of the charts (pie/donut/bar), I need the others (except for the table) to get filtered according to selection.

May I can use the UI Action plugin (UI Actions | Kibana Guide [8.9] | Elastic), but I think that would be best when you want the trigger to do updates in other plugin, etc...

Thanks

6

If your scope is to build a new page that act similarly to the dashboard but you are not going to reuse dashboard components (like the search/filter bar, time window, etc) then I think it will be easier to write your own handler for such data manipulation.
If instead, your plugin should live within a dashboard then you need to use the UI action plugin not to register actions but to propagate click actions as I described previously.

1 Like
7

Our current architecture uses uiActions but is very tight to the search bar. So I second Marco's suggestion to create your own handler.

1 Like
8

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.