I am looking to utilize ApexCharts for data visualization within an Angular project. The npm package ng-apexcharts serves as a wrapper for this purpose. However, I have encountered an issue with the default tooltip provided by ApexCharts not aligning with my design preferences. Therefore, I am interested in creating a custom tooltip component.
To implement a custom tooltip, the following steps can be followed:
HTML:
<apx-chart ... [tooltip]="tooltip"></apx-chart>
TypeScript:
@Component({...})
export class LineChartComponent implements OnInit {
tooltip: ApexTooltip = {
custom: ({ series, seriesIndex, dataPointIndex, w }) => {
return "<div>Custom tooltip HTML</div>"
}
};
...
}
The issue I am facing is:
When attempting to define a template like the one below for the tooltip HTML content
`<div class="SOME_CLASS"><mat-card>${SOME_VALUE}</mat-card></div>`
and adding corresponding CSS rules to the component's stylesheet
.SOME_CLASS {
color: red;
}
the class property and components like mat-card fail to render correctly within the DOM. Instead of rendering these elements properly, the string is simply displayed as plain text. More details on the expected HTML structure can be seen here.
Is there a method to ensure Angular binds this template accurately?
PS: As I do not have access to the tooltip component, using the following syntax will not resolve the issue
<tooltip [innerHtml]="SOME_VARIABLE"></tooltip>
as it also does not work in this scenario.