javascriptreactjsapexcharts

Apexcharts: Align xTicks and labels with beginning of heatmap cells


I am using Apexcharts to display a heatmap, which works fine.

However, i'm struggling with positioning the xAxis ticks and labels to align with the beginning of a cell in the heatmap. Currently the behaviour is as follows:

Heatmap with xTicks and labels off position

Each series has 7 values, therefore 7 ticks which are spread equally along the xAxis which causes the offset.

What i want is to have a tick and value at the beginning of each cell in the heatmap (basically for a series with 7 values, 8 ticks along the xAxis) so that the ticks are aligned with the cells like this:

enter image description here

How can this be achieved?


Solution

  • I found a workaround to achieve this for integer x-values, even though I think this is not the optimal solution.

    Apparently setting the tickAmount as well as the range property to the length of the series, delivers the desired solution if combined with an incrementation of every x value by 1.

    Add this to the chart options:

       xaxis: {
          axisTicks: {
            show: true
          },
          tickAmount: 7,
          range: 7,
          labels: {
            show: true
          }
       }
    

    And increase every x value of the series by 1.