How to change bubble color on cursor hover in JavaScript Bubble Chart?
You can customize the bubble color using the pointMove event. Refer Chart Events for more information about the events available in Chart. Refer pointMove event for more information about the options available in the pointMove event.
In this event we can get the current mouse hover point. The Event handler argument containing properties like cancel, name, series, point, series, chart, pointIndex, seriesIndex, x and y to customize the rendered bubble. Use point property in the argument to change bubble color on cursor hover.
Code Snippet
You can refer the bubble chart UG documentation to render the bubble chart.
The following code example shows the customization of bubble color on pointMove event.
[Ts]
let chart: Chart = new Chart({ // Initiazlize the point move event pointMove: (args: IPointEventArgs): void => { args.point.marker.fill = "#FF0000"; } }); |
Screenshot:
Stackblitz Sample: https://stackblitz.com/edit/r1ms6l-dmjbyn?file=index.ts
