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.sstatic.net/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();

Assembler

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 – Magus

Of course @David Buzatu, I have putted and edited my question, – Assembler

Is this what you are trying to achieve? Result – Magus

Yes Sir, it's what I want to achieve, – Assembler

Answer 1

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>

Magus

I have tried your code, and I see the labels are all hidden. – Assembler

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? – Assembler

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. – Magus

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. – Assembler

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 – Magus

Answer 2

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

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

Tit

Answer 3

With this you also hide the small borders from the legends:

xaxis:
  axisBorder:
    show: false
  axisTicks:
    show: false
  labels:
    show: false

If you also want to disabled the tooltip when hovering the data set:

xaxis:
  tooltip:
    enabled: false

Quizmaster