Customizing VerticalSliceModifier Tooltip Containers

tip

Background reading: If you haven't already, read the article The VerticalSliceModifier Type which will show you how to setup a VerticalSliceModifier📘 with default options for tooltips.

This article goes into further detail on customising the tooltip items (formatting, text content)

Basic Customization of VerticalSliceModifier Tooltips via properties

Basic customisation of the VerticalSliceModifier📘 appearance can be made through the following properties.

• The vertical line thickness, dash and stroke color can be changed with the VerticalSliceModifier.rolloverLineStroke📘, VerticalSliceModifier.rolloverLineStrokeThickness📘 and VerticalSliceModifier.rolloverLineStrokeDashArray📘 properties.
• The line selection color can be set via the VerticalSliceModifier.lineSelectionColor📘 property.
• The tooltip can be turned on/off (to have a simple cursor) with the VerticalSliceModifier.showTooltip📘 property.
• The tooltip background and text color can be changed with tooltipColor📘 and tooltipTextColor📘 properties, found on RenderableSeries.rolloverModifierProps📘 on a per-series basis.
• Axis labels can be turned on/off via the VerticalSliceModifier.verticalLine.showLabel📘 property, (where VerticalSliceModifier.verticalLine📘 is simply a LineAnnotation📘).
• Axis Label backgrounds and text color can be changed with the properties found on VerticalSliceModifier.verticalLine📘, such as axisLabelStroke📘, axisLabelFill📘.   

Deep Customization of VerticalSliceModifier Tooltips via SVG Templates

Deeper customisation of the tooltip appearance can be achieved via the tooltipSvgTemplate📘 property.

This defines the actual SVG used to host the tooltip container. This property expects a function in the following format (see TCursorTooltipSvgTemplate📘):

cursotTooltipSvgTemplate function signature

tooltipSvgTemplate: (
    seriesInfos: SeriesInfo[],
    svgAnnotation: CursorTooltipSvgAnnotation
) => string

The input/output parameters are:

• Input: an array of SeriesInfo📘: a data object which stores info about the series under the mouse.
• Input: svgAnnotation (CursorTooltipSvgAnnotation📘) which is the current tooltip SVG annotation
• Output: string, containing the new SVG to define the tooltip container.

Let's create a simple example which shows you how to customize the tooltip container.

TS

const customTooltipTemplate = (
    id, // : string
    seriesInfo, // : SeriesInfo,
    rolloverTooltip // : RolloverTooltipSvgAnnotation
) => {
    const width = 120;
    const height = 120;
    rolloverTooltip.updateSize(width, height);
    return `
    <svg width="${width}" height="${height}">
        <circle cx="50%" cy="50%" r="50%" fill="${seriesInfo.stroke}"/>
        <text y="40" font-size="13" font-family="Verdana" dy="0" fill="${"white"}">
            <tspan x="15" dy="1.2em">${seriesInfo.seriesName}</tspan>
            <tspan x="15" dy="1.2em">x: ${seriesInfo.formattedXValue} y: ${seriesInfo.formattedYValue}</tspan>
        </text>
    </svg>`;
};

lineSeries1.rolloverModifierProps.tooltipTemplate = (
    id, // : string
    seriesInfo, // : SeriesInfo
    rolloverTooltip // : RolloverTooltipSvgAnnotation
) => {
    return customTooltipTemplate(id, seriesInfo, rolloverTooltip);
};

lineSeries2.rolloverModifierProps.tooltipTemplate = (
    id, // : string
    seriesInfo, // : SeriesInfo
    rolloverTooltip // : RolloverTooltipSvgAnnotation
) => {
    return customTooltipTemplate(id, seriesInfo, rolloverTooltip);
};

const getTooltipLegendTemplate = (seriesInfos, svgAnnotation) => {
    let outputSvgString = "";

    // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
    seriesInfos.forEach((seriesInfo, index) => {
        if (seriesInfo.isWithinDataBounds) {
            const lineHeight = 30;
            const y = 50 + index * lineHeight;
            // Use the series stroke for legend text colour
            const textColor = seriesInfo.stroke;
            // Use the seriesInfo formattedX/YValue for text on the
            outputSvgString += `<text x="8" y="${y}" font-size="16" font-family="Verdana" fill="${textColor}">
                                ${seriesInfo.seriesName}: X=${seriesInfo.formattedXValue}, Y=${seriesInfo.formattedYValue}
                            </text>`;
        }
    });

    // Content here is returned for the custom legend placed in top-left of the chart
    return `<svg width="100%" height="100%">
            <text x="8" y="20" font-size="15" font-family="Verdana" fill="lightblue">Custom Rollover Legend</text>
            ${outputSvgString}
        </svg>`;
};

const vSlice1 = new VerticalSliceModifier({
    x1: 5.06,
    xCoordinateMode: ECoordinateMode.DataValue,
    isDraggable: true,
    // Defines if rollover vertical line is shown
    showRolloverLine: true,
    rolloverLineStrokeThickness: 1,
    rolloverLineStroke: "green",
    lineSelectionColor: "green",
    // Shows the default tooltip
    showTooltip: true,
    // Optional: Overrides the legend template to display additional info top-left of the chart
    tooltipLegendTemplate: getTooltipLegendTemplate
});

const vSlice2 = new VerticalSliceModifier({
    x1: 0.75,
    xCoordinateMode: ECoordinateMode.Relative,
    isDraggable: true,
    // Defines if rollover vertical line is shown
    showRolloverLine: true,
    rolloverLineStrokeThickness: 1,
    rolloverLineStroke: "orange",
    lineSelectionColor: "orange",
    // Shows the default tooltip
    showTooltip: true
});

sciChartSurface.chartModifiers.add(vSlice1, vSlice2);

This results in the following output: