Skip to main content

SeriesValueModifier

SeriesValueModifieršŸ“˜ adds y-axis marker annotations for each included renderable series. For line series it follows the y-value; for OHLC and candlestick series it follows the close value and uses the up / down candle colors for the marker background.

const {
    CategoryAxis,
    FastCandlestickRenderableSeries,
    FastLineRenderableSeries,
    MouseWheelZoomModifier,
    NumberRange,
    NumericAxis,
    OhlcDataSeries,
    SciChartJsNavyTheme,
    SciChartSurface,
    XyDataSeries,
    ZoomExtentsModifier,
    ZoomPanModifier
} = SciChart; // or import from "scichart"
const { ELastYMode, SeriesValueModifier } = SciChartFinancialTools; // if using npm, import from "scichart-financial-tools";

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
});

sciChartSurface.xAxes.add(new CategoryAxis(wasmContext, { visibleRange: new NumberRange(64, 136) }));
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
        labelPrefix: "$",
        labelPrecision: 2,
        growBy: new NumberRange(0.1, 0.12)
    })
);

const { dateValues, openValues, highValues, lowValues, closeValues, movingAverageValues } = createPriceData(180);

const ohlcDataSeries = new OhlcDataSeries(wasmContext, {
    dataSeriesName: "OHLC",
    xValues: dateValues,
    openValues,
    highValues,
    lowValues,
    closeValues
});
const movingAverageDataSeries = new XyDataSeries(wasmContext, {
    dataSeriesName: "14 period average",
    xValues: dateValues,
    yValues: movingAverageValues
});

sciChartSurface.renderableSeries.add(
    new FastCandlestickRenderableSeries(wasmContext, {
        dataSeries: ohlcDataSeries,
        dataPointWidth: 0.7,
        brushUp: "#22C55E88",
        brushDown: "#EF444488",
        strokeUp: "#86EFAC",
        strokeDown: "#FCA5A5",
        strokeThickness: 1
    }),
    new FastLineRenderableSeries(wasmContext, {
        dataSeries: movingAverageDataSeries,
        stroke: "#38BDF8",
        strokeThickness: 3
    })
);

sciChartSurface.chartModifiers.add(
    new MouseWheelZoomModifier(),
    new ZoomPanModifier(),
    new ZoomExtentsModifier(),
    new SeriesValueModifier({
        lastYMode: ELastYMode.LastVisible,
        annotationTextColor: "#FFFFFF"
    })
);

Use lastYModešŸ“˜ to switch between the final data point and the last value visible in the viewport. ELastYMode.LastVisible is useful for financial charts where the user pans historical data and expects the axis markers to describe the visible candle. ELastYMode.Last pins the marker to the final point in the series.

Use annotationTextColoršŸ“˜ when your chart theme needs a different label color. The modifier creates and owns AxisMarkerAnnotationšŸ“˜ instances and removes them when the modifier or series is detached.

See Alsoā€‹