Angular Material tags in Axis label formatter

[evoker]

Good day!

I recently upgraded to Highcharts 10 and I have an Axis label that uses Angular Material tags and more specifically the tag <mat-icon>.

The config for the label is as follows:

Code: Select all

 label: {
        useHTML: true,
        // eslint-disable-next-line
        text: '<div class="popup-info-icon"><mat-icon class="' + iconCssClass + ' chart-icon''') + '"></mat-icon></div>',
        align: 'center',
        x: 7,
        y: -24
      }           

And I am getting the following error:
chart.ts:82 Highcharts warning #33: www.highcharts.com/errors/33/?Invalid%2 ... g=mat-icon
- Invalid tagName in config: mat-icon

Is there any way to use these tags inside the text property?

I wanted to mention that I am using the highcharts-angular wrapper (in case it's relevant).

Thanks again for your valuable help!

[evoker]

I ended up using the following:

Code: Select all

Highcharts.AST.allowedTags.push('mat-icon');

Hopefully it's the correct approach.

[dawid.d]

Hi,

I'm glad you found a solution and shared it on the forum.

In case of any further questions, feel free to contact us again.
Best regards!