CODEWITHSUNDEEP
javascriptreactjsapexcharts
Javi
Javi

Reputation: 25

Apexchart - How to get a line chart with grouped x-axis labels

I want to draw a line chart with grouped X-axis labels, like this bar chart example https://apexcharts.com/react-chart-demos/column-charts/column-with-group-label/

I want to create groups of 10 elements each, so I do the following in the options object:

const options = {
  xaxis: {
    group: {
      groups: [
        { title: '2020', cols: 10 },
        { title: '2021', cols: 10 },
        { title: '2022', cols: 10 }
      ]
    }
  },
}

When I try this with a bar chart, it works fine, but when I change to a line chart, it doesn't work and the axis labels are shown without the groups.

I'm using apexcharts with react.

Upvotes: 0

Views: 2541

Answers (1)

Ivan Aroa Roy
Ivan Aroa Roy

Reputation: 11

I had the same problem when showing bars combined with lines, I solved it by adding the property tickPlacement:

const options = {
  xaxis: {
    tickPlacement: 'between',
    group: {
      groups: [
        { title: '2020', cols: 10 },
        { title: '2021', cols: 10 },
        { title: '2022', cols: 10 }
      ]
    }
  },
}

https://apexcharts.com/docs/options/xaxis/

Upvotes: 0

Related Questions