Pre loader

Tag: display

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

1 vote
1k views

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(),
 }));
0 votes
12k views

This issue repros on Android 4.4 API 19, but not API 27. It happens with the example project (Multi-Pane Stock Charts). The issue is that on certain zoom levels, the x-axis labels are cut off (so instead of displaying 11 Mar, it just displays 11).

I have tried to override TradeChartAxisLabelFormatter with my custom implementation but saw the same issue, so the bug seems to be in the provider or somewhere else.

Please see screenshot: https://imgur.com/a/2RDC2MZ

  • Mike Liu asked 6 years ago
  • last active 6 years ago
0 votes
9k views

I have a SciChart WPF control which works as expected when it is in a dedicated window, but if I place it inside of a grid it will not display properly. As you can see in the picture below, it displays the background and Axis properly, but the actual chart itself in the center is very tiny. enter image description here

XAML

<UserControl …
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            Some other stuff
        </Grid>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <s:SciChartSurface Grid.Row="2" x:Name="SciChartSurface">
            <s:SciChartSurface.XAxis>
                <s:DateTimeAxis AxisTitle="Time"/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.YAxis>
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:RubberBandXyZoomModifier />
                    <s:ZoomExtentsModifier />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
    </Grid>
</UserControl>
Showing 3 results