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;
label.style.position = 'absolute';
label.style.color = 'black';
label.style.fontSize = '12px';
label.style.left = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(xValue) - label.clientWidth / 2}px`;
label.style.top = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(yValue) - label.clientHeight}px`;
this.parentSurface.annotationCanvas.appendChild(label);
}
}
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(),
}));
Version
3.3.560
- Can Ata Tekirdağlı asked 3 months ago
- last edited 3 months ago
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: https://www.scichart.com/documentation/js/current/webframe.html#AddingDataLabels.html
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.- 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 login 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: https://demo.scichart.com/javascript-dragabble-event-markers 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",
dataLabelProvider,
paletteProvider: new DataPointSelectionPaletteProvider({ fill: "ff0000cc" })
});
Regards
David
- David Burleigh answered 2 months ago
- last edited 2 months ago
- You must login to post comments
Your Answer
Please login first to submit.
