0

At present I'm generating a chart based on a bunch of user-selected options, and this is rendered on the server to generate a png output file. The generated png chart is then displayed on the user's system, over an underlying system background.

Where the plotBackgroundColor of the chart has some opacity, the user's underlying system background will of course show through, and will influence how the chart appears.

That's all fine, because the user has complete control over both the highcharts plotBackgroundColor and the system background colour.

But now I want to generate a chart that is "free standing", with a solid background colour (no opacity) which represents exactly how the chart appears when over the system background. That way, I can display that chart on any system, to give a true picture of what the user is seeing, regardless of the system background colour in the target device.

I do have access to the user's system background colour (it's either a bitmap, or I can just extract the "dominant" colour somehow and use that as a solid colour instead if it's easier).

So using the concept of layers, this would be like merging the highcharts plotBackgroundColor with a solid colour that represents the system background colour, and using that as plotBackgroundColor instead.

Or maybe there's a way to change an underlying background "browser" colour that is used in the highcharts renderer, independent of plotBackgroundColor?

I'm sure this must be possible somehow?

drmrbrewer
  • 11,491
  • 21
  • 85
  • 181
  • If you know user's system background color, when why don't you use it for `backgroundColor`? Like this: http://jsfiddle.net/tLbmLnuc/10/ Or maybe user can set `backgroundColor` too? – Paweł Fus May 18 '15 at 09:43

1 Answers1

0

One way of doing this, and it's what I'm doing until someone posts a better answer, is just to manually combine each backgroundColor value with the underlying system canvas colour, using the method described at https://stackoverflow.com/a/10782314/4070848. This is basically just laying one colour over the other, and using an algorithm to determine the combined colour based on the respective opacities and rgb values.

I check whether the backgroundColor is a plain colour or a linear/radial gradient, and if the latter then I combine each of the stop colours separately with the underlying colour and reconstruct the gradient based on the merged stop colours.

Seems to work OK, but maybe there's an off-the-shelf method, or maybe someone can tell me how to do it better...!

Community
  • 1
  • 1
drmrbrewer
  • 11,491
  • 21
  • 85
  • 181