CODEWITHSUNDEEP
javascriptangularhighcharts
larabrookk
larabrookk

Reputation: 113

How to set less xAxis data with more column chart data in highcharts

Here is my ts file code

xAxis:{
categories:['row-1','row-2','row-3','row-4'],
max:3
},
plotOptions:{
column:{
stacking:'normal'
}
}
series:[
{
type:'column',
data:[12,23,34,45,56,67,78,89,90]
},{
type:'column',
data:[12,32,43,54,65,76,87,98,91]
}
]

Below is my working code i want to the xAxis as it is and i need all the data entered in the series. I am new to highcharts so please
I used max so that my xAxis wont extend and i tried every way i can but i can't get the result STACKBLITZ CODE

Below image is how i want my chart to be

this is how i want my chart to look like

Upvotes: 1

Views: 96

Answers (1)

magdalena
magdalena

Reputation: 3695

The easiest way to achieve that is by adding empty strings to the categories.

  xAxis: {
    categories: ['', 'row-1', '', 'row-2', '', 'row-3', '', 'row-4', '']
  },

Demo: https://jsfiddle.net/BlackLabel/8uy9vo0t/

You can also use labels.formatter to add categories directly to the relevant positions on the axis.

  xAxis: {
    tickLength: 0,
    labels: {
      formatter: function() {
        let position = 1;
        for (let i = 0; i < categories.length; i++) {
          if (this.pos === position) {
            return categories[i]
          }
                    position = position + 2
        }
      }
    },
  },

Demo: https://jsfiddle.net/BlackLabel/a1jv9nqL/

API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter

Another approach would be using Grouped Categories module.

  xAxis: {
    tickWidth: 0,
    labels: {
      style: {
        visibility: 'hidden',
        fontSize: '0px',
      },
      groupedOptions: [{
        style: {
          visibility: 'visible',
          fontSize: '12px',
        },
      }],
    },

    categories: [{
        name: "row-1",
        categories: ["0", "1"]
      }, {
        name: "row-2",
        categories: ["0", "1"]
      },
      {
        name: "row-3",
        categories: ["0", "1"]
      },
      {
        name: "row-4",
        categories: ["0", "1", "2"]
      }
    ]
  },

Demo: https://jsfiddle.net/BlackLabel/3nkeswL5/

Documentation: https://blacklabel.github.io/grouped_categories/

You can also consider using Stacked and grouped columns if your data structure can be modified.

Official demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped

Upvotes: 0

Related Questions