SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
paletteProvider transparent colour is not working.
I tried with parseColorToUIntArgb(“#ffffff00”) and parseColorToUIntArgb(“#ffffff00”, 0) to replace the colour with transparent. But its not working.
I want ho hide the marker on the chart if the value is less than a limit. Is any other possibility to hide the marker based on value?
can you check the image, i want to show only the yellow marker.
one more error i am getting from typescript
“Type ‘undefined’ is not assignable to type ‘TPointMarkerArgb'”.
Hello Arun, sorry for the late response.
The ‘paletteProvider transparent color not working’ issue is now resolved in version 1.2.1463
Please check and let us know if that works for you.
Hello Arun,
looks like it is possible to make only a stroke transparent, but not a background fill, in this case.
At this point, I can suggest using this fact as a workaround and temporary solution.
I was able to hide the point markers by setting ‘strokeThickness’ to the size of a marker and conditionally setting ‘stroke’ to “#FFFFFF00”.
class MyCustomPaletteProvider implements IPointMarkerPaletteProvider {
readonly strokePaletteMode: EStrokePaletteMode;
private readonly stroke: number;
private readonly fill: number;
private readonly rule: (yValue: number) => boolean;
constructor(stroke: string, fill: string, rule: (yValue: number) => boolean) {
this.rule = rule;
this.stroke = parseColorToUIntArgb(stroke);
this.fill = parseColorToUIntArgb(fill);
}
onAttached(parentSeries: FastLineRenderableSeries): void { }
onDetached(): void { }
overridePointMarkerArgb(xValue: number, yValue: number, index: number): TPointMarkerArgb {
if (this.rule(yValue)) {
return {
fill: this.fill,
stroke: this.stroke,
};
}
return undefined;
}
}
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, {
stroke: "LightSteelBlue",
pointMarker: new EllipsePointMarker(wasmContext, {
width: 10,
height: 10,
strokeThickness: 10,
fill: "blue",
stroke: "green",
}),
paletteProvider: new MyCustomPaletteProvider("#FFFFFF00", "#FFFFFF00", yValue => yValue < 0.5),
dataSeries: dataSeriesArr[0],
})
);
Please login first to submit.