legend

  
  legend: {
      show: true,
      showForSingleSeries: false,
      showForNullSeries: true,
      showForZeroSeries: true,
      position: 'bottom',
      horizontalAlign: 'center', 
      floating: false,
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      formatter: undefined,
      inverseOrder: false,
      width: undefined,
      height: undefined,
      tooltipHoverFormatter: undefined,
      customLegendItems: [],
      offsetX: 0,
      offsetY: 0,
      labels: {
          colors: undefined,
          useSeriesColors: false
      },
      markers: {
          size: 7,
          shape: undefined,
          strokeWidth: 1,
          fillColors: undefined,
          customHTML: undefined,
          onClick: undefined,
          offsetX: 0,
          offsetY: 0
      },
      itemMargin: {
          horizontal: 5,
          vertical: 0
      },
      onItemClick: {
          toggleDataSeries: true
      },
      onItemHover: {
          highlightDataSeries: true
      },
  }

legend

show: Boolean

Whether to show or hide the legend container.

showForSingleSeries: Boolean

Show legend even if there is just 1 series.

showForNullSeries: Boolean

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

showForZeroSeries: Boolean

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

position: String

Available position options for legend

top
right
bottom
left

horizontalAlign: String

Available options for horizontal alignment

left
center
right

floating: Boolean

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

fontSize: String

Sets the fontSize of legend text elements

fontFamily: String

Sets the font-family of legend text elements

fontWeight: String | Number

Sets the font-weight of legend text elements

formatter: function

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: Boolean

Inverse the placement ordering of the legend items.

width: Number

Sets the width for legend container

height: Number

Sets the height for legend container

tooltipHoverFormatter: function

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: Array

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.

offsetX: Number

Sets the left offset for legend container

offsetY: Number

Sets the top offset for legend container

labels

colors: Array of Colors

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

useSeriesColors: Boolean

Whether to use primary colors or not.

markers

size: Number

Size of the marker point that appears before the legend text

shape: String || Array of Strings

Shape of the marker.
Available Options for shape

circle
square
line
plus
cross
star
sparkle
diamond
triangle

strokeWidth: Number

Stroke Size of the marker point.

fillColors: Array of Colors

Fill Color of the marker point.

customHTML: function

Custom HTML element to put in place of marker

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

onClick: function

Fire an event when legend’s marker is clicked

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

offsetX: Number

Sets the left offset of the marker

offsetY: Number

Sets the top offset of the marker

itemMargin

horizontal: Number

Horizontal margin for individual legend item.

vertical: Number

Vertical margin for individual legend item.

onItemClick

toggleDataSeries: Boolean

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

onItemHover

highlightDataSeries: Boolean

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

Why Choose ApexCharts

legend

Stay Updated