# Why and how to use elastic charts?

**URL:** <https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836>\
**Category:** Kibana\
**Created:** [March 4, 2022, 10:54am UTC](https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836 "2022-03-04T10:54:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![frank3nst3in](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/frank3nst3in/32/102673_2.png) [@frank3nst3in](https://discuss.elastic.co/u/frank3nst3in)\
**Post date:** [March 4, 2022, 10:54am UTC](https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836/1 "2022-03-04T10:54:19Z")

</div>

I found the [`@elastic/charts`](https://github.com/elastic/elastic-charts) library on official github profile of elastic.

So, can I create visualizations (ones which are displayed in a kibana dashboard) by consuming Elasticsearch rest api and `@elastic/charts` ?

If yes, then how to do that?

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/d/1/d19cb43828760ccd9a5ab507302086c5dfbb61ea.png)

---

<div class="post-metadata">

**Author:** ![nickofthyme](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickofthyme/32/60032_2.png) [@nickofthyme](https://discuss.elastic.co/u/nickofthyme)\
**Post date:** [March 5, 2022, 12:14am UTC](https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836/2 "2022-03-05T00:14:31Z")

</div>

Hey @frank3nst3in 👋

This is **most** definitely possible!

The idea behind `@elastic/charts` is to centralize and unify the implementation of charts across kibana and all elastic products. That being said it is an agnostic charting library, meaning it is **not** specifically designed to render responses from Elasticsearch. So you could think of `@elastic/charts` similar to [`d3`](https://github.com/d3), [`Chart.js`](https://www.chartjs.org/) or any other of the many javascript charting libraries out there.

`@elastic/charts` is nowhere near as feature-rich as some of the other big charting libraries. We focus on development based on the needs of kibana and other elastic teams to build out a growing feature set.

* * *

So getting back to you question...

To consume `@elastic/charts` in your react app you should first look [here](https://github.com/elastic/elastic-charts/blob/master/wiki/consuming.md) and make sure you have everything setup correctly.

Once you're all setup you can import the `Chart` component and start building out a [simple chart](https://codesandbox.io/s/snowy-snow-sfvep0?file=/src/App.tsx).

```nohighlight
import { Chart, BarSeries } from "@elastic/charts";

export default function App(): JSX.Element {
  return (
    <div className="App">
      <Chart size={[500, 300]}>
        <BarSeries
          id="bars"
          name="amount"
          xScaleType="ordinal"
          xAccessor="x"
          yAccessors={["y"]}
          data={[
            { x: "trousers", y: 390 },
            { x: "watches", y: 23 },
            { x: "bags", y: 750 },
            { x: "cocktail dresses", y: 854 }
          ]}
        />
      </Chart>
    </div>
  );
}

```

This will render a simple bar chart with four values, to frills like legend or axis because those are configured manually.

![Screen Recording 2022-03-05 at 09.24.22 AM](https://us1.discourse-cdn.com/elastic/original/3X/b/5/b5de5b6bbd290b7449434bf092c82e5b72075cbc.gif)

* * *

Once you have a simple chart rendering correctly, you can start to create charts by consuming data directly from Elasticsearch. I created a simple demo [here](https://codesandbox.io/s/interesting-sara-dgrr8e?file=/src/App.tsx) that you are welcome to fork and play around with.

This is the rendered demo chart 👇

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/2/e/2e22c06bb63c1ec2add37b8a961331849a9791bf.png)

This demo uses a sample data query via `GET kibana_sample_data_flights/_search` that is just hardcoded in the demo, see the top [`mock.ts`](https://codesandbox.io/s/interesting-sara-dgrr8e?file=/src/mocks.ts) file for the actual query.

The first and often most difficult part (IMHO 😅) is structuring the data in the right way such that you can create the chart you desire. In the case of the demo, I need to denormalize (i.e. flatten) the data from the Elasticsearch response so that each document/row/item includes the `count`, `date` and `carrier`. You can think of these items as items of an array or rows in Excel.

From there we just need to tell `@elastic/charts` what keys (i.e. `count`, `date` and `carrier`) go where. We can think of these keys as columns in Excel. The API for doing this in `@elastic/charts` is to assign these keys to `accessors`. Doing so would look like this...

```nohighlight
<BarSeries
  xAccessor="date"
  yAccessors={["count"]}
  splitSeriesAccessors={["carrier"]}
  stackAccessors={["true"]}
  data={data}
/>

```

The `xAccessor` and `yAccessors` are pretty simple to understand, they just assign the lookup key to the `x` and `y` domain, these can also be functions instead of `String`s. The `splitSeriesAccessors` is what defines how the data will be split or grouped, in our case we want to group the data by `carrier`. Finally the `stackAccessors` is more of boolean to say we want to stack the bars where the key of `'true'` is erroneous.

You can see how each of the `Axis` components are configured in the demo code. This was a basic example to illustrate some of the fundamental ideas behind using `@elastic/charts`. There are many other chart types, configurations and options. Unfortunately, we do not have a genuine documentation site for this library as of yet, however, we do have a storybook site full of examples for all the different chart types we support , you can see that [here](https://elastic.github.io/elastic-charts/?path=/story/annotations-lines--x-continuous-domain&globals=theme:light).

I hope that helps, happy to answer any follow-up questions or if you have an example idea/configuration you would like to share.

---

<div class="post-metadata">

**Author:** ![frank3nst3in](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/frank3nst3in/32/102673_2.png) [@frank3nst3in](https://discuss.elastic.co/u/frank3nst3in)\
**Post date:** [March 7, 2022, 2:42am UTC](https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836/3 "2022-03-07T02:42:32Z")

</div>

Hi @nickofthyme,

Possibly the greatest answer I ever got on forum.

thanks man,

This answer resolved my few queries. But, can you take a look at here :

> [@Integration of kibana widgets in angular app](https://discuss.elastic.co/t/integration-of-kibana-widgets-in-angular-app/298929):
>
> Hi Elastic Team, I have a working angular app, a nodejs backend and a privately hosted ELK instance. Currently, everything is going good with kibana dashboard. But, now I want to display widgets generated by the kibana on my angular app without using iframe. Our ELK instance is isolated and away from the internet access. So, the only way to talk to elk instance is by using nodejs backend. Hence, I want to display the kibana widgets (generated on our kibana dashboard) querying them through m…

This might look interesting to you 🙂

---

<div class="post-metadata">

**Author:** ![nickofthyme](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickofthyme/32/60032_2.png) [@nickofthyme](https://discuss.elastic.co/u/nickofthyme)\
**Post date:** [March 7, 2022, 3:32pm UTC](https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836/4 "2022-03-07T15:32:32Z")

</div>

No problem at all! I think it's a matter of finding the right specialist for a given question, and you just happened to get me 😉.

Regarding your other post -- That is beyond my knowledge but I will drop a line to people that may know more.

---

<div class="post-metadata">

**Author:** ![frank3nst3in](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/frank3nst3in/32/102673_2.png) [@frank3nst3in](https://discuss.elastic.co/u/frank3nst3in)\
**Post date:** [March 9, 2022, 3:26am UTC](https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836/5 "2022-03-09T03:26:05Z")

</div>

Amazing @nickofthyme !

I hope every service provider should have guys like your

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 6, 2022, 3:26am UTC](https://discuss.elastic.co/t/why-and-how-to-use-elastic-charts/298836/6 "2022-04-06T03:26:19Z")

</div>

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