Highlighting Specific Columns on the X-Axis in SplineRangeAreaSeries

[Muhammad]

Hello everyone,

I’m currently working with Syncfusion’s SplineRangeAreaSeries in a React TypeScript project. What I’m trying to achieve is to visually highlight a specific column or area along the x-axis when hovering to show the shared tooltip.

I’ve set up the shared tooltip, and it’s working as expected. However, I’d like a highlighted column (or background area) to appear on the x-axis for the hovered point to improve user interaction. Unfortunately, I haven’t been able to find a direct way to do this through the standard API or the documentation.

I’ve explored highlightPattern and other styling options, but I’m not seeing how to dynamically highlight a single section or range on the x-axis specifically in combination with a shared tooltip.

Does anyone know if there’s another way to implement this effect? Or would I need to manually customize the chart to get this working?

I’ve attached two images below that demonstrate what I’m trying to achieve. Any guidance or suggestions would be greatly appreciated!

Attachment: screenshots_22401582.rar

[Nishanthi Panner Selvam]

Hi Muhammad,

Greetings from Syncfusion.

We have analyzed your reported scenario based on that we regret to inform you that currently we don’t have support for highlighting a specific area when hovering to show tooltip. However, we have created a workaround by using the crosshair to create a highlighted like column along with the shared tooltip.

We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

<ChartComponent crosshair={{ enable: true, line: {width: 30, color: '#a6aab0' , opacity: 0.1}, lineType: 'Vertical' }}>

    <Inject services={[SplineRangeAreaSeries,Crosshair]} />

</ChartComponent>

Screenshot:

Sample: https://stackblitz.com/edit/react-y5g7tl-5dnhvq?file=index.js

Kindly revert us if you have any concerns.

Regards,

Nishanthi