Styling RolloverModifiers using Builder API

Hi Ari

I did notify the team about this but still no doc update. However, I managed to put together a codepen example that shows how to do this.

Firstly:

• RolloverModifier rolloverLineStroke, showRolloverLine, showTooltip are configured at the RolloverModifier itself, in IRolloverModifierOptions
• RolloverModifier Tooltip Background colour and Tooltip Text colour is controlled on a per-series basis via the renderableSeries.rolloverModifierProps property. This is type RenderableSeriesRolloverModifierProps.
• RolloverModifier font seems to only be settable if you update the RenderableSeriesRolloverModifierProps.tooltipTemplate function and return a new SVG template (to confirm with the dev team)

There does not seem to be an easy way to set the fontFamily of a tooltip or text color of a tooltip via the Builder API, however, any element of SciChart.js charts can be retrieved from the sciChartSurface object after using chartBuilder.buildChart and customised using programmatic javascript API.

Here’s an example:

const { chartBuilder, ESeriesType, EChart2DModifierType } = SciChart;

// Example data
const xValues = [0, 1, 2, 3, 4, 5];
const yValues = [10, 15, 12, 18, 16, 20];

async function setupSciChart() {

// Chart configuration using chartBuilder.buildChart
const { wasmContext, sciChartSurface } = await chartBuilder.buildChart("scichart-root", {
 series: [{
    type: ESeriesType.LineSeries,
    xyData: {
        xValues,
      yValues,
    dataSeriesName: "My Series",
    },
    options: {
        stroke: "SteelBlue",
        strokeThickness: 2,
    }
    }],
    modifiers: [{
        type: EChart2DModifierType.Rollover,
        options: {
            showTooltip: true,
      rolloverLineStroke: "Orange",
      rolloverLineStrokeThickness: 5,
      showRolloverLine: true
        }
    }]
});

// Access the rolloverProps on the renderable series
const rolloverProps = sciChartSurface.renderableSeries.get(0).rolloverModifierProps;

// Now you can configure any of the options in https://www.scichart.com/documentation/js/v4/typedoc/classes/rollovermodifierrenderableseriesprops.html
rolloverProps.tooltipTextColor = "Blue";
rolloverProps.tooltipColor = "White";

rolloverProps.tooltipDataTemplate = (seriesInfo, tooltipTitle, tooltipLabelX, tooltipLabelY) => {
      const valuesWithLabels = [];
     // Line Series
     valuesWithLabels.push(`X: ${seriesInfo.formattedXValue} Y: ${seriesInfo.formattedYValue}`);
     return valuesWithLabels;
};

// See https://www.scichart.com/documentation/js/v4/2d-charts/chart-modifier-api/rollover-modifier/#customizing-the-tooltip-content
rolloverProps.tooltipTemplate = (id, seriesInfo, rolloverTooltip) => {
        const width = 120;
        const height = 60;
        rolloverTooltip.updateSize(width, height);
        return `
        <svg width="${width}" height="${height}">
           <rect x="0" y="0" width="${width}" height="${height}" 
          rx="10" ry="10" fill="${seriesInfo.stroke}" />
            <text y="10" font-size="16" font-family="Arial" 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>`;
};

}
setupSciChart();

I’ll dig into this further in future as there is a task on the board to update the RolloverModifier docs with better code samples for both JS / Builder API.