Html Question posted in
Some basic documentation can be found here.

Html – How to hide legends for the labels and rounded color icons using ApexChart.js

I want to hide the legend for a specific line where I wanted to hide the label and it’s icon inside the chart. For the rest of the legends will be shown normally inside the chart. As you can see, I’m able to hide the labels but not the icon. I want to solve this issue where I wanted to hide both of it instead of hiding only the labels of the legends

<div id="chart">
<apexchart type="rangeArea" height="400" :options="chartOptions" :series="combinedSeries(item, 'related_keyword_data')" />
</div>

Graph with Legend Issue

        legend: {
        show: true,
        formatter: function(seriesName) {
            // List of series names to hide
            const hiddenSeries = ['CI_70', 'CI_90'];
            for (let hidden of hiddenSeries) {
              if (seriesName.includes(hidden)) {
                return '';
              }
            }
            return seriesName; // Return the original series name to show the legend
          },
        onItemClick: {
            toggleDataSeries: true
        },
    },

If I declare it inside of the series, it will not be affected and I think it is because the chartOption{} is the main declaration for all the behaviors of the chart. So I have to declare it inside of the chartOption{}. Same goes trying to set opacity for specific lines, it won’t work if declare inside of the series.

          {
            name: `${relatedItem.keyword} - CI_70`,
            data: ci_70,
            type: 'rangeArea',
            color: color,
          },
          {
            name: `${relatedItem.keyword} - CI_90`,
            data: ci_90,
            type: 'rangeArea',
            color: color,
          },

I’m trying to hide for a specific series instead of hiding all of them but I can only hide the labels and not the icons together. I cannot find answers to hide the labels and it’s icons for specific series of a line

Tags:

2

Answers


  1. 0

    The legend marker can be disabled for a specific series, by setting its
    legend.marker.size to 0.
    For a multiple series chart, the value of legend.marker.size may be an array
    with sizes for each of the series (the default value is 7). Thus, for instance:

    legend:{
    markers:{
        size: [7, 7, 0, 7, 0]
     },
    ......
}

    will cancel the marker for the 3rd and 5th series.

    Unfortunately, the option legend.itemMargin.horizontal doesn’t allow its value to be
    an array with different values for different series. The default value is 5, so there
    will be a space of double that value in place of the missing legend item.

    A possible solution for that is to set the value to zero and add spacing between items
    by adding a non-breaking space character to each legend text. Here’s an example,
    hiding the same third legend item:

    legend:{
    itemMargin: {
        vertical: 4,
        horizontal: 0
    },
    formatter(s, {seriesIndex}){
        if(seriesIndex === 2 || seriesIndex === 4){
           return '';
        }
        retturn s + ' &nbsp;'    
    },
    markers:{
        size: [7, 7, 0, 7]
     },
    ......
}

    Here’s a demo of those options in snippet, with the hidden series indices set in a dynamic hidden array:

    const hidden = [2, 4]; // zero-based indices: 3rd and 5th series
const option = {
    series: Array.from({length: 5}, (_, seriesIndex) => ({
        name: `Data ${seriesIndex + 1}`,
        data: Array.from({length: 10}, () => Math.floor(Math.random() * 30))
    })),
    chart: {
        type: 'line',
        height: 400,
        background: '#335',
        foreColor: '#fff'
    },
    legend: {
        itemMargin: {
            vertical: 4,
            horizontal: 0
        },
        formatter(s, {seriesIndex}){
            if(hidden.includes(seriesIndex)){
                return '';
            }
            return s + ' &nbsp;'
        },
        markers: {
            size: Array.from({length: 5}, (_, seriesIndex) => hidden.includes(seriesIndex) ? 0 : 7)
        },
    },
    dataLabels: {
        enabled: false
    }
};
(new ApexCharts(document.querySelector("#chart"), option)).render();
    <div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    Login or Signup to reply.
  2. 0

    If you just want to hide legend and its associated icon then you just can try like below:

    legend: {
   ...
   show: false // This hides the legend and its icon
   ...
}

    or if you just want to do it for specific series then you can do it like below:

    legend: {
    show: true // Show legend for all series
}
series: [
    {
          name: 'Visible',
          data: [1, 2, 3, 4, 5]
    },
    {
          name: 'Hidden',
          data: [5, 4, 3, 2, 1]
    }
]

    hide legends through css like:

    .apexcharts-legend-series[seriesname="Hidden"] {
    display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search