Creating charts

External library: @elastic/charts v64.1.0

EUI provides utilities and documentation for working with Elastic Charts, an open source charting library also created and maintained by Elastic.

Theming via EUI

EUI provides both light and dark theme files to use in tandem with Elastic Charts. Simply import these objects from the themes folder and pass the correct one to the Settings.theme property.

import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';

const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;

<Settings baseTheme={chartBaseTheme} />

Kibana engineers

EUI provides a plugin utility for ease of pulling in the correct theme object depending on the current Kibana theme. Learn more from this readme.

EUI also provides some basic color palettes and functions if you would like to change the default color blind safe scheme to another palette. You can import these from the services folder. Create a new partial theme object with your chosen colors and prepend it to the list of themes supplied to Settings.

import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
import { euiPaletteGreen } from '../../../../src/services';

const MyChart = () => {
  const customColors = {
    colors: {
      vizColors: euiPaletteGreen(5),
    },
  };
  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
  return (
    <Chart>
      <Settings baseTheme={chartBaseTheme} theme={customColors} />
      //...
    </Chart>
  );
};

You'll find an example of these in the demo below.

Loading...

Coloring charts

Use color to distinguish categories, represent quantity/density, and highlight data. When using color in this way, be aware that too many colors in a single chart can create noise and hinder quick comprehension.

When creating a multi-series chart where each series shows contrasting data, use the color blind safe palette of contrasting colors. This will also avoid implying levels of magnitude.

Think about the data you are delivering and if there is a way to highlight key indicators. If you can combine the series into logical groups, use contrasting shapes and styles, but keep the same color for within groups.

Quantity vs trends

When coloring for sequential series data (not categorical), rely on conventions. If the data signifies quantities, use a single color that spans from light colors for low amounts to dark colors for high amounts. If the data signifies trends, use a two-color divergent scheme, with the darkest colors at the extremes.

Whan signifying quantities, group values into intervals instead of a continuous gradient scale.