How to add dataSource value in tooltip for bubbleChart
Hi,
I have this dataSource type :
export type BubbleChartDataValueDto = {
X: number;
Y: number;
Size: number;
Color: number;
FillColor: string;
Text: string;
};
and this template :
<template>
<ejs-chart
:id="uniqueID"
ref="bubbleChart"
:key="chartRefreshKey"
style="display: block"
:theme="theme"
align="center"
height="100%"
width="100%"
:title="label"
:tooltip="tooltip"
:legendSettings="legendSettings"
:titleStyle="labelStyle"
:background="backgroundColor ? backgroundColor : 'white'"
:seriesRender="seriesRender"
>
<e-series-collection>
<e-series
:dataSource="data"
type="Bubble"
xName="X"
size="Size"
yName="Y"
width="2"
:tooltipMappingName="tooltipMapping"
pointColorMapping="FillColor"
/>
</e-series-collection>
</ejs-chart>
</template>
Tooltip is made like this :
public tooltip = {
enable: true,
header: "${point.tooltip}",
format:
`${this.attributeXLabel} : ` +
"<b>${point.x}</b><br/>" +
`${this.attributeYLabel} : ` +
"<b>${point.y}</b><br/>" +
`${this.attributeSizeLabel} : ` +
"<b>${point.size}</b><br/>" +
`${this.attributeColorLabel} : ` +
"<b>${point.colorValue}</b>",
};
I would like to have in tooltip the "Color" value but point.colorValue return y data value :
Is it possible ?
Thank yo
Hi Naud,
Greetings from Syncfusion.
We can render the color value in the tooltip by using the text argument in tooltipRender event in Chart component. We have created a simple Vue application to demonstrate the same and it can be downloaded from the below link.
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample-1097350774
Code Snippet:
|
tooltipRender: function(args) { for (var i = 0; i < this.series[0].dataSource.length; i++) { if (args.text.split("<br/>")[0] === this.series[0].dataSource[i].text) { args.text = args.text + '<br/>Color : <b>' + this.series[0].dataSource[i].color + '</b>'; } } } |
Screenshot:
Kindly, revert us if you have any concerns.
Regards,
Swetha
