Tag: Coloring

Hello together,

I have implemented a PaletteProvider which colors the whole Series depending on the Series always the same.

public class OwnPaletteProvider : PaletteProviderBase
{
    private readonly Dictionary<IRenderableSeries, Color> seriesColorsDictionary = new Dictionary<IRenderableSeries, Color>();

    private List<Color> availablesColors = new List<Color>()
    {
        Colors.Red,
        Colors.Yellow,
        Colors.Green,
        Colors.Orange,
        Colors.Blue
    };

    private int counter = 0;

    public override Color? GetColor(IRenderableSeries series, double xValue, double yValue)
    {
        // Get the specific Color for the specific Series
        if (seriesColorsDictionary.ContainsKey(series))
        {
            return seriesColorsDictionary[series];
        }

        // Series doesn't have a color
        // Add new Color from the list for this series in a RoundRobin-way
        var newColorForSeries = availablesColors[counter%availablesColors.Count];
        counter++;

        seriesColorsDictionary.Add(series, newColorForSeries);

        return newColorForSeries;
    }
}

The problem is that I have also in this Series PointMarkers which should have the same Color as the RenderableSeries. I thought, I could create a Style which binds to the Color of the RenderableSeries, but this is not working (see image in attachment).

<Style x:Key="pointMarker" TargetType="{x:Type s:BasePointMarker}">
    <Setter Property="StrokeThickness" Value="5" />
    <Setter Property="Fill" Value="{Binding Path=SeriesColor, 
        RelativeSource={RelativeSource AncestorType={x:Type s:FastLineRenderableSeries}}, Converter={StaticResource StringToBrushConverter}}"/>
    <Setter Property="Background" Value="{Binding Path=SeriesColor, 
        RelativeSource={RelativeSource AncestorType={x:Type s:FastLineRenderableSeries}}, Converter={StaticResource StringToBrushConverter}}"/>
</Style>

I could imagine that the PaletteProvider doesn’t support this. I would need a dynamic coloring of the RenderableSeries and the PointMarkers because the amount of the Series are flexible.

My current solution for this problem is to set the color in the ViewModel, but this seems to me not very nice, because I what to have only Bindings in the ViewModel and the “Styling” and the “Coloring” of the Chart should be done in the Xaml Code with some converters are with the PaletteProvider.

Why questions are:

• How is it possible to color the FastLineRenderableSeriesor or the XyScatterRenderableSeries dynamically, also when new ones are added or deleted dynamically from the Xaml Code?
• Can the PaletteProvider have an influence of the Color MarkerPoints?

Best regards,
Martin

PS: Sry I couldn’t use NuGet because the Port 81 is blocked in our company, so you have to add the SciChart library by our own.

I want to use a different color for each value in the chart I created here. To put it simply, if the value is greater than 10, I want it to appear yellow, if it is less than green, and red if it is less than 0. thanks

const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJSLightTheme(),   
});
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: yValues,
    highValues: compositeScanAverageArray,
    lowValues: yValues,
    closeValues: compositeScanAverageArray,
});
const renderableSeries = new FastCandlestickRenderableSeries(wasmContext, {
    dataSeries,
    stroke: "white",
    strokeThickness: 1,
});

sciChartSurface.renderableSeries.add(renderableSeries);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: UAL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LAL,
        y2: LWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "green",
        strokeThickness: 1,
        fill: "rgba(0, 128, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LWL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.LineAnnotation({ stroke: "#FF6600", strokeThickness: 3, x1: startBarIndex, x2: endBarIndex, y1: compositeScanAverage, y2: compositeScanAverage }),
);

sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());

}