javascriptapexcharts

Enable data-labels only for specific chart types in a mixed chart


I am trying to show data labels only for the line chart in a mixed/combo chart type (line & bar) but I couldn't find a way to disable it for the bar series.

it is possible to visualize the code in this link Here is my existing code.

var options = {
      chart: {
        height: 310,
        type: 'line',
        stacked: false,
      },
      series: [{
        name: 'Series Column',
        type: 'column',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
      }, {
        name: 'Series Area',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
      }, {
        name: 'Series Line',
        type: 'line',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
      }],           
      markers: {
        size: 0
      },
      dataLabels: {
        enabled: true
      },
      xaxis: {
        type:'datetime'
      },
      yaxis: {
        title: {
          text: 'Points',
        },
        min: 0
      },
      

    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );

    chart.render();

Is there an option to turn off data-labels for specific series in a mixed chart?


Solution

  • EDIT: A new option enabledOnSeries is shipped in v3.5.0. You can use it like

    options = {
      dataLabels: {
        enabled: true,
        enabledOnSeries: [1, 2]
      }
    }
    

    The above will show data-labels only for series with index 1,2 and disable data-labels on series with index 0 (in your example - the column series)