Adding background image to XY chart plot area

Ignition
1

I have a URS requirement to be able to add a background image to the plot region of an XY Chart.

I've played around with this a tiny bit, and while the XY chart componet doesn't itself support it within its props, the component itself is just a dynamically created SVG.

I did try doing the dumb thing and just putting an image behind the component :slight_smile: but obviously at different screen sizes, the chart renders differently and the image becomes misaligned (or not even remotely obvious that it was even supposed to be aligned...)

Then I thought that maybe I could insert the image as an SVG component into the chart... but that seems hard.

Has anyone done this before?

What they want to do is to add things like an annotated plot with ideal graph, and then plot points against it, so the image MUST be aligned and accurately positioned to be useful.

2

I'm guessing you need it to be the background of the plot area only ?
I'm thinking maybe there might be a way to do this with css. Something like set up background-image on the chart with a binding or something, hide it with some other property, then make the plot area inherit from that image with the stylesheet.
maybe...

edit:
Probably not a lead worth following. It seems like it would be an unreliable hack at best.

A real plot of the ideal graph would probably be the cleanest approach, but as Transistor says, that leaves the problem of annotations.
What if you overlaid a transparent canvas on top of it, and use this for annotations ?
You could make that annotation canvas as elaborate as you want. If you need direct interactions with the chart, have an "annotation mode", and toggle the canvas 'pointer-events' on/off based on that.

1 Like
3

Two options I can think of:

  1. Tell them not to be silly. :stuck_out_tongue_winking_eye:
  2. Create a separate plot but that leaves the problem of the annotations. I've wondered about this in the past but haven't got a solution. The component is based on AM Charts libraries and they have an annotation package but I've no idea if it can be incorporated or if it does quite what you need. We're on AM Charts version 4, I think.

https://www.amcharts.com/docs/v4/tutorials/plugin-annotation/

4

I had never tried this before but I have an SVG embedded into a style class on a test bed project so I tried applying it as a style on a chart. It worked on timeseries chart but did not work on XY chart.

I found a nice tool on the internet that you can upload an SVG to and it returns CSS to embed it in a style.

I used this code

	background-image: url(... SVG code ... ');
	background-repeat: repeat-x;
	background-size: contain;

It's not giving me behavior I think you would want but I have to go to a meeting in 1 min so this should probably be helpful in some capacity.