I tried to put the legend title with its color code at the bottom of the chart before a load of data. Here is the code I tried. Kindly let me know the corrections to be made.

   var options = {
        series: [],
        chart: {
          height: 350,
          type: 'line',
          toolbar: {
            show: true
          },
          zoom: {
            enabled: false,
          }
        },
        legend: {
          show:true,
          position: 'bottom',
          floating: true,
          verticalAlign: 'bottom',
          align:'center'
        },
        tooltip: {
          shared: true
        },
        colors: ['#77B6EA', '#545454'],
        dataLabels: {
          enabled: true
        },

Here is the image of display

I tried to put the legend title with its color code at the bottom of the chart before a load of data. Here is the code I tried. Kindly let me know the corrections to be made.

   var options = {
        series: [],
        chart: {
          height: 350,
          type: 'line',
          toolbar: {
            show: true
          },
          zoom: {
            enabled: false,
          }
        },
        legend: {
          show:true,
          position: 'bottom',
          floating: true,
          verticalAlign: 'bottom',
          align:'center'
        },
        tooltip: {
          shared: true
        },
        colors: ['#77B6EA', '#545454'],
        dataLabels: {
          enabled: true
        },

Here is the image of display

• javascript
• apexcharts

5 Answers 5

The crux of the problem is: how does ApexCharts know what to show in the legend if you don't provide any data.

Assuming you know what the series will be called, you can still provide empty series even if you have no data:

series: [
  {
    name: "Series 1",
    data: []
  }
]

If you have only one series, you'll also need to change the value for showForSingleSeries from the default false to true:

legend: {
  showForSingleSeries: true
}

On a side note, you can also drop the show and position legend attributes as they're the same as the defaults. You might also want to remove the verticalAlign and align attributes as they're not included in the documentation.

You should check out their api.

https://apexcharts./docs/options/legend/

const options = {
... 
    legend: {
        show: true,
        position: 'bottom',
    },
    labels: ['value 1', 'value 2', 'value 3', 'value 4']
...
}

const data = []

Been looking everywhere on the web for this. Simply make sure that it's added as an input in the HTML.

Does it say so anywhere in their documentation? I don't know. Do they make it crystal clear? Not at all.

<apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [labels]="chartOptions.labels"
    [fill]="chartOptions.fill"
    [dataLabels]="chartOptions.dataLabels"
    [responsive]="chartOptions.responsive"
    [legend]="chartOptions.legend" // Add this line
  ></apx-chart>

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: {
    width: 12, height: 12, strokeWidth: 0, strokeColor: '#fff', fillColors: undefined, radius: 12, customHTML: undefined, onClick: undefined, offsetX: 0, offsetY: 0
  }
  ,
  itemMargin: {
    horizontal: 5, vertical: 0
  }
  ,
  onItemClick: {
    toggleDataSeries: true
  }
  ,
  onItemHover: {
    highlightDataSeries: true
  }
  ,
}

For those who prefer pure js appex chart I made a solution for React and Next 13.

'use client';
import { useEffect } from 'react';

export default function Chart(props: any) {
  useEffect(() => {
    import('apexcharts').then((mod) => {
      const ApexCharts = mod.default;

      const chart = new ApexCharts(
        document.querySelector(`#${props.id}`),
        props.options
      );

      chart.render();
    });
  }, [props.options, props.id]);

  return <div {...props}></div>;
}

Now you can use this ponent

<Chart id="CHART-ID" className="..." options={options}></Chart>