Highcharts chart with risk color background

Question

I would like to create a chart that has dynamic elliptical areas as background. The background should visualize the risk and can be static but needs to render to different sizes of the chart of course.

Does anybody have an idea on how to achieve this with highcharts?

Answer 1

Thanks for your help. I solved the problem with a radial bBackground color.

chart : {
    type: 'spline',
    renderTo: chartData,
    zoomType: 'x',
    plotBackgroundColor: Highcharts.svg ? {
        radialGradient: {
            cx: 1.0,
            cy: 0.0,
            r: 1.5
        },
        stops: [
            [0.0, 'rgba(255, 0, 0, 1.0)'],
            [0.5, 'rgba(255, 193, 86, 1.0)'],
            [1.0, 'rgba(44, 160, 44, 1.0)']
        ]
    } : null
},

The radialGradient starts at 1.0, 0.0 (x, y) which is in the top right corner of the plot area. I added three color gradient stops: red, yellow, green.

Hope this helps someone having the same problem. :)