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 4 weeks ago
- last edited 3 weeks 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 1 week 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 weeks ago
- You must login to post comments
Please login first to submit.