Highcharts areaspline, charts crosshair

Question

Hi all i have this chart http://i.prntscr.com/U1ho1cqRTVq-ifoMquWKAw.png and i need to get in result http://i.prntscr.com/Lj_PqmNWSxiIBJmK3tS44Q.png

I think solution of this task in crosshair< but i start use highcharts one week ago. Can u help me or give some links that help solve problem. Because i refactored a lots of code all day and had not find solution of task.

My settings

chart: {
    type: 'areaspline',
    backgroundColor: 'transparent',
    height: '500px',
    spacingRight: -1,
    spacingLeft: -1
},
title: {
    text: ''
},
subtitle: {
    text: ''
},
xAxis: {
    categories: [],
    x: {
        min: 0,
        max: 0
    },
    allowDecimalse: false,
    gridLineWidth: 1,
    gridLineColor: '#393546',
    labels: {
        y: -20,
    },
    tickWidth: 0,
    lineColor: "#fff",
    zIndex: 0,
     **crosshair:** {
        color: 'rgba(73,168,222,0.5)',
        zIndex: 0
    }
},
yAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    visible: false,
    title: {
        text: ''
    },
    labels: {
        enabled: false
    }
},

plotOptions: {
    areaspline: {
        marker: {
            enabled: false,
            states: {
                hover: {
                    symbol: 'circle',
                    fillColor: '#fff',
                    lineColor: '#2196f3',
                    lineWidth: 2,
                    radius: 7,
                    enabled: true,
                }
            },
        },
    }
},
series: [
    {
        data: [
        ],
        name: 'V/IRTUS',
        showInLegend: false,
        color: '#2196f3',
    }
],
credits: {
    enabled: false
}

};

data [] i get from api and categories too and min max option

I do not think it can be achieved with a crosshair. You need to split the areaspline series into shapes for which the gradient should be applied - the paths need to be calculated based on series points or you can try to use zones. When you apply zones, shapes and clips will be created and you can use their coordinates to render the paths and apply the gradient. POC here http://jsfiddle.net/smsb8dx8/ — morganfree, Apr 03 '18 at 13:06

Highcharts areaspline, charts crosshair

0 Answers0