Pre loader

The proper way to implement custom legend

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


I need to implement custom html legend instead of built-in options.
To hide built-in rollover I’m using series config:

    this.series.rolloverModifierProps.width = 0;
    this.series.rolloverModifierProps.height = 0;
    this.series.rolloverModifierProps.markerColor = "rgba(255, 255, 255, 0)";

I can’t set

 rolloverModifierProps.showRollover = false; 

because in that case rolloverModifierProps.tooltipDataTemplate handler is not firing.
My handler looks like

rolloverModifierProps.tooltipDataTemplate = (seriesInfo: SeriesInfo): string[] => {
            const ohlcInfo = seriesInfo as OhlcSeriesInfo;
            myOwnHandlerToPassDataToHtml({ high: ohlcInfo.highValue, low: ohlcInfo.lowValue, open: ohlcInfo.openValue, close: ohlcInfo.closeValue });
            return [];

I’am wondering if there is any other way to hide rollover marker but keep tooltipDataTemplate handler firing?

  • You must to post comments
Best Answer

Hi Sergey,
To display a custom legend for RolloverModifier you should use tooltipLegendTemplate.

This code will produce a legend see the screenshot.

const tooltipLegendTemplate = (seriesInfos: SeriesInfo[], svgAnnotation: RolloverLegendSvgAnnotation) => {
    let outputSvgString = "";
    let delta = 0;
    seriesInfos.forEach((seriesInfo, index) => {
        if (seriesInfo.isWithinDataBounds) {
            const y = 40 + delta;
            outputSvgString += `<text x="8" y="${y}" font-size="13" font-family="Verdana" fill="lightblue">Series ${
                index + 1
            }: X ${seriesInfo.formattedXValue}, Y ${seriesInfo.formattedYValue}</text>`;
            delta += 20;

    return `<svg width="180" height="80">
        <rect width="100%" height="100%" fill="brown" stroke="#00000000" stroke-width="2" />
        <svg width="100%">
            <text x="8" y="20" font-size="13" font-family="Verdana" fill="lightblue">Custom Legend</text>

    new RolloverModifier({ tooltipLegendTemplate, showTooltip: false })

Moreover, you can also use tooltipLegendTemplate with CursorModifier to get a similar result.
If you need something different please provide a code example.

Best regards,

  • Sergey Chernyakov
    Hello, Michael. I wanted to know is there any way to subscribe on mouse event with concrete series info without setting rolloverModifierProps size to zero and color to transparent. Also I don’t need any svg tooltip/marker as you provided because I have my own html legend outside scichart populated with series values. Just wondering may be I missed some method in docs with similar seriesinfo handler but without targeting on svg.
  • Michael Klishevich
    Hi Sergey. In order to subscribe to SeriesInfo[] you need to add a chart modifier either RolloverModifier or CursorModifier and to use a tooltipLegendTemplate. This is another example with the CursorModifier: sciChartSurface.chartModifiers.add(new CursorModifier({showTooltip: false, crosshairStroke: “transparent”, showAxisLabels: false, tooltipLegendTemplate}));
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.