Elastic Charts

The Tooltip spec defines the appearance and behavior of chart tooltips. It is compatible with all charts except Metric and Wordcloud.

Important Constraints:

• Only a single Tooltip spec can be defined per chart. If multiple are provided, only the last one is used.
• When using customTooltip, the header, body, and footer properties are ignored.
• When using header, the headerFormatter is ignored.

BasicSeriesSpec is the base type used for defining all XY series specifications in @elastic/charts. It serves as a foundation that aggregates several specialized prop groups required to define how data is accessed, scaled, and formatted within an XY chart series.

To fully configure a series using BasicSeriesSpec, you must provide configurations for:

• SeriesSpec: Core series configuration.
• SeriesAccessors: Logic for extracting data from your data objects.
• SeriesScales: Configuration for how data values map to chart coordinates.
• MarkFormatter: Logic for formatting the visual marks (points/lines) on the chart.

The Axis spec defines an axis for an XY chart. It can be used multiple times within a single chart configuration to define different axes (e.g., X and Y axes).

Compatibility

An Axis spec can be used alongside:

Global Specs:

• Settings
• Tooltip
• GroupBy
• SmallMultiples

Series and Annotation Specs:

• Axis (multiple axes)
• AreaSeries
• LineSeries
• BarSeries
• BubbleSeries
• HistogramBarSeries
• LineAnnotation
• RectAnnotation

Overrides

When identifying this spec via overrides, it uses:

• specType: SpecType.Axis
• chartType: ChartType.XYAxis

The SmallMultiples spec is used to define dimensions for faceted charts (tiling multiple charts together). It is designed to work in conjunction with the GroupBy spec to create a faceted layout.

Supported Chart Types

You can use SmallMultiples with the following chart types:

• All Cartesian/XY Charts: AreaSeries, LineSeries, BarSeries, BubbleSeries, and HistogramBarSeries.
• Partition Charts
• Heatmap Charts

The LegendSpec interface allows for extensive customization of the chart legend.

Key configuration options include:

• showLegend: boolean to toggle visibility.
• legendLayout: Use LegendLayout ('list' or 'table') to define the layout.
• legendPosition: Defines where the legend is placed using Position or LegendPositionConfig (supporting vertical/horizontal alignment and floating modes).
• legendMaxDepth: Controls how deep the legend hierarchy goes.
• legendValues: An array of LegendValue types (e.g., 'total', 'average', 'max', 'min') to display summary statistics in the legend.
• legendAction: A component to handle interactions when a legend item is clicked.
• legendStrategy: Determines how the legend is constructed (e.g., 'node', 'path', 'key').

The Goal spec defines a simple goal/gauge/bullet chart.

:::danger Warning: This spec is deprecated and has been replaced by the BulletGraph spec. It will be removed from the library in future versions. Use BulletGraph for new implementations. :::

Goal is a standalone spec and cannot be combined with other specs except for Settings specs.

The BulletGraph spec defines a simple bullet chart. It is a standalone spec and cannot be combined with other chart specs, though it can be used alongside Settings specs. When manually defining the spec, ensure the following overrides are applied:

• specType should be SpecType.Series
• chartType should be ChartType.BulletGraph

A TooltipValue represents a single data point's information within a tooltip. It extends PointerValue<D> and includes:

• color: The color associated with the series.
• datum: The underlying raw data object (D).
• formattedMarkValue: A pre-formatted string representation of the value.
• isHighlighted: Whether this specific point is currently highlighted.
• isVisible: Whether the point is visible in the current tooltip view.
• label: The display label for the series/point.
• markValue: The numerical value of the point.
• seriesIdentifier: The identifier for the series this value belongs to.

When using BubbleSeries, you can combine it with the following specifications:

Global Specs

• Settings
• Tooltip
• GroupBy
• SmallMultiples

Other Series and Annotations

• Axis
• AreaSeries
• LineSeries
• BarSeries
• HistogramBarSeries
• LineAnnotation
• RectAnnotation

The Heatmap spec is used to define a heatmap chart. It is a standalone spec and cannot be combined with other chart specs, with the exception of supported global specs.

Important Compatibility Note: The Heatmap spec is NOT compatible with the Axis spec. It uses its own internal axis implementation. Axis controls are managed exclusively through the props listed in the Heatmap spec documentation.

The continuousTimeRasters function is used to return the required layers for a time axis given a filter predicate.

To prevent visual clutter, a filter predicate like notTooDense can be used. This predicate utilizes a minimumTickPixelDistance value to determine if a specific layer is suitable for display based on the available pixel space.

Additionally, the system uses a replacements mechanism to avoid duplication. When a specific layer is present, it can trigger the removal of other layers that share the same spacing constraints (e.g., replacing a daysUnlabelled layer with a days layer). Replacements are executed in order from coarsest to finest.

The Meter component (an alpha feature) is used to create gauge-style visualizations.

Key concepts:

• MeterOrientation: Can be 'horizontal' or 'vertical'.
• MeterFill: Defines how the meter is filled. It supports:
  • Single: A single color fill.
  • Gradient: A linear gradient fill using MeterColorStop arrays.
  • Palette: A multi-color fill using MeterPaletteFill with colorStops.