0

i need to create custom xaxis shown in this image in highcharts with angularenter image description here .

in plain JS in jsfiddle I am able to achieve it, I tried same chart options in angular but i am getting like this, Can someone help me on what i did wrong? enter image description here,

stackblitz link for angular

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Krishna
  • 760
  • 3
  • 14
  • 30
  • Please [edit] the externally hosted code into the post; doing so will make sure it remains useful even if the link breaks. My script [is not allowed to do this](https://meta.stackoverflow.com/a/344512/4751173) because of potential licensing problems. – Glorfindel Nov 10 '22 at 09:00

1 Answers1

2

You need to import and initialize the highcharts-grouped-categories module: https://www.npmjs.com/package/highcharts-grouped-categories

import * as Highcharts from 'highcharts';
import HighchartsGroupedCategories from 'highcharts-grouped-categories';
import { Injectable } from '@angular/core';

HighchartsGroupedCategories(Highcharts);

Live demo: https://stackblitz.com/edit/highcharts-angular-demo-4y3css?file=src%2Fapp%2Fhighcharts.service.ts

Docs: https://github.com/highcharts/highcharts-angular#to-load-a-module

ppotaczek
  • 36,341
  • 2
  • 14
  • 24