Different fillOpacity to a bellcurve in highcharts

Question

I am using HighCharts and Highcharts-react-official for using highcharts in my project. I am able plot bell Curve graph . Here is the code implementation :

var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4,
    4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
    3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
    3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
    2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
    2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
    2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
    3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2,
    2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7,
    3.2, 3.3, 3, 2.5, 3, 3.4, 3
];

var pointsInInterval = 5;

Highcharts.chart('container', {
    chart: {
        margin: [50, 0, 50, 50],
        events: {
            load: function () {
                Highcharts.each(this.series[0].data, function (point, i) {
                    var labels = ['4σ', '3σ', '2σ', 'σ', 'μ', 'σ', '2σ', '3σ', '4σ'];
                    if (i % pointsInInterval === 0) {
                        point.update({
                            color: 'black',
                            dataLabels: {
                                enabled: true,
                                format: labels[Math.floor(i / pointsInInterval)],
                                overflow: 'none',
                                crop: false,
                                y: -2,
                                style: {
                                    fontSize: '13px'
                                }
                            }
                        });
                    }
                });
            }
        }
    },

    title: {
        text: null
    },

    legend: {
        enabled: false
    },

    xAxis: [{
        title: {
            text: 'Data'
        },
        visible: false
    }, {
        title: {
            text: 'Bell curve'
        },
        opposite: true,
        visible: false
    }],

    yAxis: [{
        title: {
            text: 'Data'
        },
        visible: false
    }, {
        title: {
            text: 'Bell curve'
        },
        opposite: true,
        visible: false
    }],

    series: [{
        name: 'Bell curve',
        type: 'bellcurve',
        xAxis: 1,
        yAxis: 1,
        pointsInInterval: pointsInInterval,
        intervals: 4,
        baseSeries: 1,
        zIndex: -1,
        marker: {
            enabled: true
        }
    }, {
        name: 'Data',
        type: 'scatter',
        data: data,
        visible: false,
        marker: {
            radius: 1.5
        }
    }]
});

Bell curve plot properly but I want to implement different fill-Opacity for different ranges of data. I Have tried using zone-Stops but that doesn't work and code implementation is too lengthy.

I have provided a image of my requirement as well.

Is there any simple way to achieve this behavior ?

Is this a result which you want to achieve? Demo: https://jsfiddle.net/BlackLabel/c8y20xed/ — Sebastian Wędzel, Sep 10 '20 at 14:22
@SebastianWędzel yes but rather showing zones vertically ,want it to show horizontally. — Nishant_061, Sep 11 '20 at 07:03
@SebastianWędzel I have added a image in the question. I want to achieve the same. — Nishant_061, Sep 11 '20 at 07:42

score 2 · Answer 1 · answered Sep 11 '20 at 09:01

According to the comments - it can be achieved by using the zones feature and defining the series.zoneAxis as 'x'.

Demo: https://jsfiddle.net/BlackLabel/3g8061k5/

{
    ...,
    zoneAxis: 'x',
    zones: [{
      value: 2.18,
      color: 'rgb(255, 0, 0, 0.25)'
    }, {
      value: 2.62,
      color: 'rgb(0, 102, 255, 0.25)'
    }, {
      value: 3.49,
      color: 'rgb(51, 204, 51, 0.25)'
    }, {
      value: 3.92,
      color: 'rgb(0, 102, 255, 0.25)'
    }, {
      color: 'rgb(255, 0, 0, 0.25)'
    }, ]
 }

API: https://api.highcharts.com/highcharts/series.line.zones

API: https://api.highcharts.com/highcharts/series.line.zoneAxis

Different fillOpacity to a bellcurve in highcharts

1 Answers1