CODEWITHSUNDEEP
javascriptchartshighchartsdotnethighcharts
Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 41

How can i add upColor and down Color in series of scatter stock hichart?

Below is jsfiddle link of my chart. I want to set colorUp green and down to red. I added color and colorUp properties in series but not working. I don't know how can i achieve that.

Here is jsFiddle link https://jsfiddle.net/pe4dqk57/

(async () => {

// Load the dataset
const data = await fetch(
    'https://demo-live-data.highcharts.com/aapl-ohlcv.json'
).then(response => response.json());

const volume = [],
    dataLength = data.length;

for (let i = 0; i < dataLength; i += 1) {
    volume.push([
        data[i][0], // the date
        data[i][5] // the volume
    ]);
}

Highcharts.stockChart('container', {
    chart: {
        events: {
            load: function () {
                addPopupEvents(this);
            }
        }
    },
    yAxis: [{
        labels: {
            align: 'left'
        },
        height: '80%',
        resize: {
            enabled: true
        }
    }, {
        labels: {
            align: 'left'
        },
        top: '80%',
        height: '20%',
        offset: 0
    }],
   navigator:{
   enabled: false
   },
    series: [{
        type: 'scatter',
        data: volume
    }, {
        type: 'column',
        data: volume,
        yAxis: 1
    }],
   
});

})();

Upvotes: 0

Views: 37

Answers (1)

Muhammad Zeeshan
Muhammad Zeeshan

Reputation: 41

This is what i did to show upCoror and down color in scatter stock chart

data: volume.map(function (point, i) {
if (i === 0 || point[1] > volume[i - 1][1]) {
    return { x: point[0], y: point[1], color: 'green' }; // Higher or first point
} else {
    return { x: point[0], y: point[1], color: 'red' }; // Lower
}

}) I just passed data in series using map method and it working fine.

Upvotes: 0

Related Questions