Why and how to use elastic charts?

Elastic Stack Kibana
1

I found the @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
image1015×452 15.5 KB

1 Like
2

Hey @frank3nst3in :wave:

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, Chart.js 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 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.

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

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 that you are welcome to fork and play around with.

This is the rendered demo chart :point_down:

image
image1586×998 42.8 KB

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 file for the actual query.

The first and often most difficult part (IMHO :sweat_smile:) 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...

<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 Strings. 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.

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

5 Likes
3

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 :

This might look interesting to you :slight_smile:

3 Likes
4

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 :wink:.

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

5

Amazing @nickofthyme !

I hope every service provider should have guys like your

1 Like
6

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