Hi,
For this purpose, the toolTipFormatFunction of the Chart can be used.
export class AppComponent {
source: any[] = [
{ year: 2020, value: 100, detail: 'Project A completed' },
{ year: 2021, value: 120, detail: 'Project B completed' },
{ year: 2022, value: 90, detail: 'Project C delayed' }
];
dataAdapter: any;
constructor() {
this.dataAdapter = new jqx.dataAdapter({
localData: this.source,
dataType: 'json'
});
}
// Custom tooltip function
toolTipFormatFn = (value: any, itemIndex: number, serie: any, group: any, categoryValue: any, categoryAxis: any) => {
const record = this.source[itemIndex];
return
Year: ${record.year}
Value: ${record.value}
Details: ${record.detail}
`;
};
}
jqxChart
[width]=”600″
[height]=”400″
[source]=”dataAdapter”
[xAxis]=”{ dataField: ‘year’, type: ‘basic’ }”
[seriesGroups]=”[{
type: ‘column’,
series: [{ dataField: ‘value’, displayText: ‘Value’,
toolTipFormatFunction: toolTipFormatFn }]
}]”>
`
toolTipFormatFunction allows you to override the default tooltip content.
It receives multiple parameters:
value → the value of the point
itemIndex → index of the data point in your array
serie → series object
group → series group
categoryValue → the category value (x-axis)
categoryAxis → category axis object
You can use itemIndex to pull additional details from your source array and display them in HTML format.
jqxChart renders this as the tooltip, so you can include bold text, line breaks, or any HTML content.
Best regards,
Peter
