legend

Configuration Structure

legend: {
  show: boolean,
  showForSingleSeries: boolean,
  showForNullSeries: boolean,
  showForZeroSeries: boolean,
  floating: boolean,
  inverseOrder: boolean,
  position: 'top' | 'right' | ...,
  horizontalAlign: 'left' | 'center' | 'right',
  fontSize: string,
  fontFamily: string,
  fontWeight: string | number,
  width: number,
  height: number,
  offsetX: number,
  offsetY: number,
  formatter: Function,
  tooltipHoverFormatter: Function,
  customLegendItems: string[],
  clusterGroupedSeries: boolean,
  clusterGroupedSeriesOrientation: string,
  labels: { ... },
    colors: string | string[],
    useSeriesColors: boolean,
  markers: { ... },
    size: number,
    strokeWidth: number,
    fillColors: string[],
    shape: ApexMarkerShape,
    offsetX: number,
    offsetY: number,
    customHTML: Function,
    onClick: Function,
  itemMargin: { ... },
    horizontal: number,
    vertical: number,
  onItemClick: { ... },
    toggleDataSeries: boolean,
  onItemHover: { ... },
    highlightDataSeries: boolean,
}

show

Default: true

Whether to show or hide the legend container.

showForSingleSeries

Default: false

Show legend even if there is just 1 series.

showForNullSeries

Default: true

Allows you to hide a particular legend if it's series contains all null values.

showForZeroSeries

Default: true

Allows you to hide a particular legend if it's series contains all 0 values.

position

Default: 'bottom'

Available position options for legend

  • top
  • right
  • bottom
  • left

horizontalAlign

Default: 'center'

Available options for horizontal alignment

  • left
  • center
  • right

floating

Default: false

The floating option will take out the legend from the chart area and make it float above the chart.

fontSize

Default: '12px'

Sets the fontSize of legend text elements

fontFamily

Default: undefined

Sets the font-family of legend text elements

fontWeight

Default: 400

Sets the font-weight of legend text elements

formatter

Default: undefined

A custom formatter function to append additional text to the legend series names

legend: { /* * @param {string} seriesName - The name of the series corresponding to the legend * @param {object} opts - Contains additional information as below * opts: { * seriesIndex * w: { * config, * globals * }, * } */ formatter: function(seriesName, opts) { return [seriesName, " - ", opts.w.globals.series[opts.seriesIndex]] } },

inverseOrder

Default: false

Inverse the placement ordering of the legend items.

width

Default: undefined

Sets the width for legend container

height

Default: undefined

Sets the height for legend container

tooltipHoverFormatter

Default: undefined

A formatter function to allow showing data values in the legend while hovering on the chart. This can be useful when you have multiple series, and you don't want to show tooltips for each series together.

legend: { /* * @param {string} seriesName - The name of the series corresponding to the legend * @param {object} opts - Contains additional information as below * opts: { * seriesIndex, * dataPointIndex * w: { * config, * globals * }, * } */ tooltipHoverFormatter: function(seriesName, opts) { return seriesName + ' - \<strong>' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '\</strong>' } },

Note: This feature is only available in shared tooltips (when you have tooltip.shared: true).

customLegendItems

Default: []

Allows you to overwrite the default legend items with this customized set of labels. Please note that the click/hover events of the legend will stop working if you provide these custom legend labels.

clusterGroupedSeries

Default: true

In a grouped stacked chart, this option gives a visual difference by grouping the legend items in different containers.

clusterGroupedSeriesOrientation

Default: 'vertical'

Available Options are either "horizontal" or "vertical"

offsetX

Default: -20

Sets the left offset for legend container

offsetY

Default: 4

Sets the top offset for legend container

labels

colors

legend.labels.colors
Default: undefined

Custom text colors for legend labels. Accepts an array of colors where each index corresponds to the series index

useSeriesColors

legend.labels.useSeriesColors
Default: false

Whether to use primary colors or not.

markers

size

legend.markers.size
Default: 7

Size of the marker point that appears before the legend text

shape

legend.markers.shape
Default: undefined

Shape of the marker.
Available Options for shape

  • circle
  • square
  • line
  • plus
  • cross
  • star
  • sparkle
  • diamond
  • triangle

strokeWidth

legend.markers.strokeWidth
Default: 1

Stroke Size of the marker point.

fillColors

legend.markers.fillColors
Default: undefined

Fill Color of the marker point.

customHTML

legend.markers.customHTML
Default: undefined

Custom HTML element to put in place of marker

markers: customHTML: function() { return '\<span className="custom-marker">\<i className="fas fa-chart-pie">\</i>\</span>' } },

onClick

legend.markers.onClick
Default: undefined

Fire an event when legend's marker is clicked

markers: onClick: function(chart, seriesIndex, opts) { console.log("series- " seriesIndex + "'s marker was clicked") } },

offsetX

legend.markers.offsetX
Default: 0

Sets the left offset of the marker

offsetY

legend.markers.offsetY
Default: 0

Sets the top offset of the marker

itemMargin

horizontal

legend.itemMargin.horizontal
Default: 5

Horizontal margin for individual legend item.

vertical

legend.itemMargin.vertical
Default: 4

Vertical margin for individual legend item.

onItemClick

toggleDataSeries

legend.onItemClick.toggleDataSeries
Default: true

When clicked on legend item, it will toggle the visibility of the series in chart.

onItemHover

highlightDataSeries

legend.onItemHover.highlightDataSeries
Default: true

When hovered on legend item, it will highlight the paths of the hovered series in chart.