We have previously assigned a CustomVerticalMarkerAnnotation class which is extended from AxisMarkerAnnotation, and would like to change the image of the annotation when we trigger the onClick event. Is there a way to redraw the image without removing the annotation?
Here is our code sample of the annotation in question:
let svgString: string = this.getSvgIcon("orange-arrow-up", "#ee7a26").replace(/LABEL_HERE/g, "").replace(/COLOR_TEXT_HERE/g, "transparent").replace(/WIDTH_HERE/g, '50').replace(/HEIGHT_HERE/g, '30').toString();
let blob = new Blob([svgString], { type: 'image/svg+xml' });
let url = URL.createObjectURL(blob);
let image: HTMLImageElement = document.createElement('img');
image.src = url;
let customHorizontalReferenceAnnotation = new CustomVerticalMarkerAnnotation({
id: id,
x1: x1,
xAxisId: this.sciChartGraph.xAxes.get(2).id,
yAxisId: this.sciChartGraph.yAxes.getById('y-axis-marker').id,
xCoordinateMode: ECoordinateMode.DataValue,
image: image,
imageWidth: 150,
imageHeight: 35,
onClick: () => {
this.onClickHorizontalReference(x, id)
}
and we would like to change the image under the function this.onClickHorizontalReference
we tried this but it didn’t work out as the image remains the same
const selectedHorizontalReference = this.sciChartGraph.annotations.getById(id) as CustomVerticalMarkerAnnotation
let svgString: string = this.getSvgIcon("yellow-arrow-up", "#e7ee26").replace(/LABEL_HERE/g, "").replace(/COLOR_TEXT_HERE/g, "transparent").replace(/WIDTH_HERE/g, '50').replace(/HEIGHT_HERE/g, '30').toString();
let blob = new Blob([svgString], { type: 'image/svg+xml' });
let url = URL.createObjectURL(blob);
let image: HTMLImageElement = document.createElement('img');
image.src = url;
selectedHorizontalReference.image = image
- Suzanne Ong asked 2 months ago
- last edited 2 months ago
- You must login to post comments
Hello, it just occurred to me that in our examples we have a slightly different logic for creating an image.
Specifically, it is an async operation.
Here is a function we use for that in one of the examples
const createImageFromSvgString = async (svg: string) => {
return new Promise<HTMLImageElement>((resolve, reject) => {
let blob = new Blob([svg], { type: 'image/svg+xml' });
let url = URL.createObjectURL(blob);
let image = document.createElement('img');
image.src = url;
image.addEventListener(
'load',
() => {
URL.revokeObjectURL(url);
resolve(image);
},
{ once: true }
);
});
};
Alternatively, the library exports a helper function – “createImageAsync”
So, then it can be used as below
const blob = new Blob([someSvgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const htmlImageElement = await createImageAsync(url);
Per my observation, this may be a fix for the issue that you are facing.
Please try these and let us know if it helped.
Otherwise, it will require further investigation.
- Jim Risen answered 2 months ago
- You must login to post comments
Thanks Jim for both answers!
After some experimentation with my team, both solutions work, and we have opted for invalidateElement to fix our problem there
- Suzanne Ong answered 1 month ago
- You must login to post comments
Hello, I can confirm there is some issue with it.
This has been logged to our task queue: https://abtsoftware.myjetbrains.com/youtrack/issue/SCJS-1881/AxisMarkerAnnotation-image-change-issue
Meanwhile, my suggestion would be to try requesting a refresh of the surface by calling at some point after clicking the following
sciChartSurface.invalidateElement({force: true})
- Jim Risen answered 2 months ago
- You must login to post comments
Please login first to submit.
