How to hide some xaxis labels elements on apexChartjs?

Question

I am creating a chart project with apexChart. My aim is to hide xaxis labels which has odd index of the xaxis elements. with some hours of researches in the net, I can not still achieve it. Could anyone help me please? [![enter image description here][1]][1] [1]: https://i.stack.imgur.com/ZJlqW.png

This is my snipped code:

<div id="chart"></div>
<script src="apexcharts.js"></script>
<script>
var typeStr = 'column';
var options = {
        series: [
      {
        name: 'acts number',
         type: typeStr,
    data: [0, 0, 0, 8, 10, 45.6, 0, 0, 0, 0, 0, 0]
  },
  {
    name: 'cost',
    type: typeStr,
    data: [0.0, 0.0, 0.0, 25.5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
  }],
  chart: {
    height: 350,
    type: 'line',
    stacked: false,
    toolbar: {
        show: false
      },
    zoom: {
        enabled: false
      }
  },
  stroke: {
    width: [2, 2, 2],
    curve: 'straight'
  },
   legend: {
      show: false
  },
  colors: ['#10baee', '#297694'],
  dataLabels: {
    enabled: false,
    enabledOnSeries: [1]
  },
  xaxis: {
      categories: ['07 fevr.','08 fevr.','09 fevr.','10 fevr.','11 fevr.','12 fevr.','13 fevr.', '14 fevr.','15 fevr.','16 fevr.','17 fevr.','18 fevr.'],
      tickPlacement: 'on'
  },
  yaxis: [
      {
          seriesName: 'acts',
          axisTicks: {
            show: true,
          },
          axisBorder: {
            show: true,
            color: '#10baee'
          },
          labels: {
            style: {
              color: '#10baee',
            },
            formatter: (value) => { return value }
          },
          title: {
            text: "Views",
            style: {
              color: '#10baee',
            }
          },
        },
        {
          seriesName: 'cost',
          opposite: true,
          axisTicks: {
            show: true,
          },
          axisBorder: {
            show: true,
            color: '#297694'
          },
          labels: {
            style: {
              color: '#297694',
            },
            formatter: function (value) {
                return value.toFixed(2) + " \u20ac";
            },
           },
          title: {
            text: "Acts price",
            style: {
              color: '#297694',
            }
          }
        },
      ]
  };
var chartH = new ApexCharts(document.querySelector("#chart"), options);
chartH.render();

Could you provide a snipped with at least your setup for apexChart? What `series` do you use? What `options` did you set? Probably I could then guide you to use the `filter` function from the `xaxis` object (as exemplified here: [ApexChart-Formatter](https://apexcharts.com/docs/formatting-axes-labels/) — David Buzatu, Jul 20 '20 at 13:40
Of course @David Buzatu, I have putted and edited my question, — zayann, Jul 20 '20 at 13:43
Is this what you are trying to achieve? [Result](https://ibb.co/QYXkwKJ) — David Buzatu, Jul 20 '20 at 14:07

score 6 · Answer 1 · edited Aug 29 '22 at 06:26

6

Here I found new code for this problem and it will work on both X or Y axis

yaxis: {
  labels: {
    show: false,
  }
},

edited Aug 29 '22 at 06:26

vimuth

5,064
33
79
116

answered Aug 25 '22 at 10:21

Arun kumar

61
1
2

David Buzatu · Accepted Answer · 2020-07-20T14:35:42.900

Here is what I found: The only way to format your labels is by using the following function on the xaxis object:

xaxis: {
    labels: {
        formatter: function(value) {
           return value;    
    }
  }
}

Now, the problem is that I couldn't find a solution that would not put some value in the small labels you see when you hover over your entry in the table. The best I could do was this:

The formatter function simply gets everything you put in the categories array. So, we take each value and, if it not undefined, we split it (because your dates look like: day month..

Split returns an array of strings. For instance, for the string 07 fevr., after split(), we get in splittedCategories the following: ['07', 'fevr.']. You can check this with a console.log(splittedCategories)

After that, we take the number of the day (which is on the first entry of the resulted array of strings) and see if it even or odd. If it's even, we just put on the label its value (say 07 fevr.), otherwise, we put nothing.

xaxis: {
          categories: ['07 fevr.', '08 fevr.', '09 fevr.', '10 fevr.', '11 fevr.', '12 fevr.', '13 fevr.', '14 fevr.', '15 fevr.', '16 fevr.', '17 fevr.', '18 fevr.'],
          tickPlacement: 'on',
          labels: {
              formatter: function (value) {
                  if (value !== undefined)
                      splittedCategories = value.split(" ")
                  dayNumber = splittedCategories[0]
                  return dayNumber % 2 == 1 ? value : "";
              }
          }
      },

Please tell me if this is sufficient for your use case. This is the official documentation on formatting: Docs

EDIT I have made the if statement a little bit more clear. Also, this is what I tested inside a body tag (I imported apexcharts in the header as <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>):

<div id="chart"></div>
<script>
    var typeStr = 'column';
    var options = {
        series: [
            {
                name: 'acts number',
                type: typeStr,
                data: [0, 0, 0, 8, 10, 45.6, 0, 0, 0, 0, 0, 0]
            },
            {
                name: 'cost',
                type: typeStr,
                data: [0.0, 0.0, 0.0, 25.5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
            }],
        chart: {
            height: 350,
            type: 'line',
            stacked: false,
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            }
        },
        stroke: {
            width: [2, 2, 2],
            curve: 'straight'
        },
        legend: {
            show: false
        },
        colors: ['#10baee', '#297694'],
        dataLabels: {
            enabled: false,
            enabledOnSeries: [1]
        },
        xaxis: {
            categories: ['07 fevr.', '08 fevr.', '09 fevr.', '10 fevr.', '11 fevr.', '12 fevr.', '13 fevr.', '14 fevr.', '15 fevr.', '16 fevr.', '17 fevr.', '18 fevr.'],
            tickPlacement: 'on',
            labels: {
                formatter: function (value) {
                    if (value !== undefined) {
                        splittedCategories = value.split(" ")
                        dayNumber = splittedCategories[0]
                        return dayNumber % 2 == 1 ? value : "";
                    }
                    return ""
                }
            }
        },
        yaxis: [
            {
                seriesName: 'acts',
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: true,
                    color: '#10baee'
                },
                labels: {
                    style: {
                        color: '#10baee',
                    },
                    formatter: (value) => { return value }
                },
                title: {
                    text: "Views",
                    style: {
                        color: '#10baee',
                    }
                },
            },
            {
                seriesName: 'cost',
                opposite: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: true,
                    color: '#297694'
                },
                labels: {
                    style: {
                        color: '#297694',
                    },
                    formatter: function (value) {
                        return value.toFixed(2) + " \u20ac";
                    },
                },
                title: {
                    text: "Acts price",
                    style: {
                        color: '#297694',
                    }
                }
            },
        ]
    };
    var chartH = new ApexCharts(document.querySelector("#chart"), options);
    chartH.render();
</script>

I have tried your code, and I see the labels are all hidden. — zayann, Jul 20 '20 at 14:28
Yes Sir, thank you very much, it works very well. But one question, please, how to get the categories size or length and the index item of this categories? — zayann, Jul 20 '20 at 14:43
Where would you like these values? Inside your formatter or outside of it? If you want them inside your labels, the best way to do it is to define your array before creating your `options` object and then simply using `yourCategoriesArray.length`. Please exemplify what you are trying to accomplish with index item. — David Buzatu, Jul 20 '20 at 19:07
Actually, the data putted in the category are loaded dynamically, it's why I should customize the appearance of the xaxis elements. For example, if I have 60 values(or more than 60 values) in this category(ie: 06 Feb to 06 May), then I want to hide 07 Feb, 09 Feb, etc... If February ends to 29(ie 29 Feb), and March begins to 1 Mar, the split method(given in the reponse) may not be working in this case. — zayann, Jul 20 '20 at 21:30
So you would like to hide the beginning of another month? Say: 27 febr., 29 febr. -> and stop. Or: 27 febr. 29 febr., 1 Mar, 3 Mar. Just give an example and I will look into it — David Buzatu, Jul 21 '20 at 06:34

How to hide some xaxis labels elements on apexChartjs?

2 Answers2