The proper way to implement custom legend

Answered

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?

Version

2.0.2179

JavaScript Legend RolloverModifier CustomLegend

Sergey Chernyakov asked 3 years ago
last edited 3 years ago

You must login to post comments

Answers (1)

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>
            ${outputSvgString}
        </svg>
    </svg>`;
};

sciChartSurface.chartModifiers.add(
    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,
Michael

Images

Michael Klishevich answered 3 years ago

- Sergey Chernyakov
- 3 years ago
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
- 3 years ago
- 1
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}));