Skip to content

Consuming @elastic charts

Jump to bottom
Marco Vettorello edited this page Nov 16, 2022 · 1 revision

Components

You can import Chart components from the top-level Elastic Chart module.

import { Axis, BarSeries, Chart, Position, ScaleType } from '@elastic/charts';

Using Elastic Charts in Kibana

To use Elastic Charts code in Kibana, check if @elastic/charts packages is already configured as dependency in package.json and simply import the components you want.

Using Elastic Charts in a standalone project

You can consume Elastic Charts in standalone projects, such as plugins and prototypes. Elastic-Charts has a peer dependency on moment-timezone. Add that dependency on your main project with:

yarn add moment-timezone

Importing CSS

You MUST import CSS styles related to the theme you are using. You may use Webpack or another bundler to import the compiled CSS style with the style, css and postcss loaders.

import '@elastic/charts/dist/theme_light.css';
// or
import '@elastic/charts/dist/theme_dark.css';

If using Elastic Charts in a project that already uses eui or some other styling library, you should import the theme only files, which excludes reset styles.

import '@elastic/charts/dist/theme_only_light.css';
// or
import '@elastic/charts/dist/theme_only_dark.css';

Note: @elastic/charts does not provide custom reset styles. We use and test using reset styles provided by eui via the EuiProvider.

If using Elastic Charts in the same project that is already compiling EUI's Sass (like Kibana), you can import the SASS files directly instead of using the CSS. Just be sure to import Elastic Charts Sass files after EUI.

@import './node_modules/@elastic/eui/src/themes/amsterdam/colors_light';
@import './node_modules/@elastic/eui/src/themes/amsterdam/globals';

@import './node_modules/@elastic/charts/theme_light';
// or
@import './node_modules/@elastic/charts/theme_dark';

Supported React versions

By default @elastic/charts supports, develops and tests against the version of react defined in kibana/package.json, most currently react@^16.

We understand the desire to use later versions of react and we have verified the usage of @elastic/charts with react@^17 and see no perceivable impact. We advice using caution when consuming charts with react@^17 until kibana is upgraded and we start to develop and test against this latest version, see https://github.com/elastic/kibana/issues/129095.

Polyfills

Elastic Charts is transpiled to es5 but requires the core-js/stable polyfill for IE11.

If using babel there are two options

Option 1 preferred - @babel/preset-env

Use a .babelrc config with the usebuiltins option set to 'entry' and the corejs option set to 3.

Option 2 - @babel/polyfill

Directly import polyfill and runtime.

import 'core-js/stable';
import 'regenerator-runtime/runtime';
Clone this wiki locally