# Charts plugin or @elastic/charts **URL:** \ **Category:** Kibana\ **Tags:** kibana-plugin-development\ **Created:** [July 24, 2023, 4:15am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033 "2023-07-24T04:15:27Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [July 24, 2023, 4:15am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/1 "2023-07-24T04:15:27Z")
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](https://elastic.github.io/eui/#/elastic-charts/creating-charts:~:text=External%20library%3A%20%40elastic/charts%20v53.1.1)) and charts-plugin([List of Kibana plugins | Kibana Guide [8.8] | Elastic](https://www.elastic.co/guide/en/kibana/current/plugin-list.html#:~:text=streams%20responses%20back.-,charts,-The%20Charts%20plugin)). 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 ---
**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\ **Post date:** [July 25, 2023, 9:20am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/2 "2023-07-25T09:20:50Z")
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 ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [July 26, 2023, 4:52am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/3 "2023-07-26T04:52:03Z")
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 ---
**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\ **Post date:** [July 26, 2023, 7:02am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/4 "2023-07-26T07:02:46Z")
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? ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [July 26, 2023, 7:22am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/5 "2023-07-26T07:22:14Z")
Rather than creating a dashboard inside Kibana/Analytics/Dashboard, I want to **create a mini dashboard inside my plugin**. Something like below: ![image](https://us1.discourse-cdn.com/elastic/original/3X/3/8/3893f8d85bbdc567d556f0c05610dc5329632fc2.png) 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](https://www.elastic.co/guide/en/kibana/current/uiactions-plugin.html#uiactions-plugin)), but I think that would be best when you want the trigger to do updates in other plugin, etc... Thanks ---
**Author:** ![markov00](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/markov00/32/33316_2.png) [@markov00](https://discuss.elastic.co/u/markov00)\ **Post date:** [July 26, 2023, 8:06am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/6 "2023-07-26T08:06:32Z")
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. ---
**Author:** ![Stratoula\_Kalafateli](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/stratoula_kalafateli/32/70923_2.png) [@Stratoula\_Kalafateli](https://discuss.elastic.co/u/Stratoula_Kalafateli)\ **Post date:** [July 26, 2023, 8:16am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/7 "2023-07-26T08:16:11Z")
Our current architecture uses uiActions but is very tight to the search bar. So I second Marco's suggestion to create your own handler. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [August 23, 2023, 8:17am UTC](https://discuss.elastic.co/t/charts-plugin-or-elastic-charts/339033/8 "2023-08-23T08:17:00Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.