How to hide some xaxis labels elements on apexChartjs?

Viewed 5888

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();
2 Answers

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>

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

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