Here

1] I am trying to use custom color scheme instead of default theme provided by highcharts. But It is not working as expected. I have implemented colors array and it should serially apply the colors, but it is randomizing the color sequence and sometimes even repeating the colors.

2] And also trying to implement custom tool-tip but the code is giving an error.

I have created a stackblitz as below:

https://stackblitz.com/edit/angular-ivy-mz3dhi?file=src/app/app.component.html,src/app/app.component.ts,src/app/app.module.ts,package.json

Any help would be appreciated!

CodePudding user response：

Thank you for sharing your code - you would need to order your data by the level itself. i.e.

data: [
            {
              id: '0.0',
              parent: ' ',
              name: 'Parent',
            },
            {
              id: '1.3',
              parent: '0.0',
              name: 'Steve',
            },
            {
              id: '1.2',
              parent: '0.0',
              name: 'Sam',
            },
            {
              id: '1.1',
              parent: '0.0',
              name: 'Stefy',
            },
            {
              id: '2.1',
              parent: '1.1',
              name: 'Section1',
            },
            ...
            ...
            ...
      ]

CodePudding user response：

When you use Highcharts in Angular, sometimes you need to extend types, article about extending Highcharts in typescript.

interface extendPointLabelObject extends Highcharts.PointLabelObject {
}


tooltip: {
  formatter: function( this: extendPointLabelObject) {
    return 'custom tooltip'
  }
},

Live demo