Pre loader

How can I display y-Axis labels for each values?

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


When using FastCandlestickRenderableSeries, I want every value to appear on the chart. I tried to use DataLabelProvider for this, but it didn’t work. What can I do.

class CustomDataLabelProvider extends DataLabelProvider {
onDataPoint(renderableSeries, xValue, yValue) {
    const labelText = `${yValue.toFixed(2)}`;

    const label = document.createElement('div');
    label.textContent = labelText; = 'absolute'; = 'black'; = '12px'; = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(xValue) - label.clientWidth / 2}px`; = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(yValue) - label.clientHeight}px`;


const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),   
titleStyle: { fontSize: 22 },

sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);

const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: compositeScanAverageArray,
highValues: yValues,
lowValues: compositeScanAverageArray,
closeValues: yValues,

sciChartSurface.renderableSeries.add(new FastCandlestickRenderableSeries(wasmContext, {
dataSeries: dataSeries,
strokeThickness: 1,
dataPointWidth: 0.5,
paletteProvider: new CustomPaletteProvider(),
dataLabelProvider: new CustomDataLabelProvider(),
  • Andrew Burnett-Thompson
    What do you mean by ‘I want every value to appear on the chart’? Can you provide a sketch or a screenshot? Also, the code you’ve provided for DataLabelProvider is completely wrong :S please check our documentation here:
  • Can Ata Tekirdağlı
    I know it’s completely wrong, if it were true it would work :D I want to do what you sent in the document, but there is no change in my graph :( How can i do it in FastCandlestickRenderableSeries. thanks a lot.
  • Andrew Burnett-Thompson
    Question: where do you want the labels to be placed? What value should they show? Candlestick has Open High Low Close. For example do you want to show Close value above the candle? Some further instruction will let us come up with a solution
  • You must to post comments

If you just want a single label per candle, you can do it by adding a properly configured DataLabelProvider to your FastCandleStickSeries.

The code below is from this demo: which is using horizontal candles, so you may need to adjust the positioning logic, but the basic principle applies.

// FastCandlestickRenderableSeries does not have a DataLabelProvider by default
const dataLabelProvider = new DataLabelProvider({ style: { fontFamily: "Arial", fontSize: 14 }, color: "white" });
dataLabelProvider.getPosition = (state, textBounds) => {
    const xVal = (state.renderPassData.pointSeries as IOhlcPointSeries).openValues.get(state.index);
    const xCoord = state.renderPassData.yCoordinateCalculator.getCoordinate(xVal);
    const yCoord = state.yCoord() + (textBounds.m_fHeight / 2);
    return new Point(xCoord, yCoord);
dataLabelProvider.getText = state => {
    const open = (state.renderPassData.pointSeries as IOhlcPointSeries).openValues.get(state.index);
    const close = (state.renderPassData.pointSeries as IOhlcPointSeries).closeValues.get(state.index)
    return (close - open).toFixed(1);

// Create the event series
const eventSeries = new FastCandlestickRenderableSeries(wasmContext, {
    dataSeries: eventDataSeries,
    dataPointWidth: 30, // Normally this would be invalid but it is passed to the override below
    xAxisId: "EventX",
    yAxisId: "EventY",
    paletteProvider: new DataPointSelectionPaletteProvider({ fill: "ff0000cc" })


  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.