简体   繁体   中英

set individual color for each bar in bar chart using highcharts

I have a current chart where I plot the year's cumulative P&L. I would like to show each individual column as either green or red depending on whether or not that day's P&L was up or down but I'm not sure how to accomplish this within highcharts.

In order to do that I will have to set the x axis to one item of the data array, the y axis to another and use the third to determine the column color, as the data come in as an array of date,pnl,cumulativepnl. Currently to display the chart I set up the data as follows;

 // split the data set into date and cumulativepnl
        var pnldata = [],
            dataLength = data.length;            
        for (var i = 0; i < dataLength; i++) {                
            pnldata.push([
                data[i][0], // the date
                data[i][2] // cumulativepnl  data[i][1] is the day's pnl
            ]);
        }

The series is set up as follows;

 series: [{
                type: 'column',
                data: pnldata
            }]

I am not sure how to split the data apart for the x and y axes, and how to set each individual columns color.

Solution: data array needs to be changed so color is set there (per Pawels answer)

 var pointColor;
        for (var i = 0; i < dataLength; i++) {
            if (data[i][1] >= 0) {
                pointColor='#008000';
            } else {
                pointColor='#FF0000';
            }
            pnldata.push({
                x: data[i][0], // the date
                y: data[i][2], // cumulativepnl  data[i][1] is the day's pnl
                color:pointColor
            });
        }

Here is the entire function's code;

function showColumnChart(data, selector,acctname) {
        // split the data set into date and cumulativepnl
        var pnldata = [],
            dataLength = data.length;
        var yr = moment().year(data[1][0]);
        for (var i = 0; i < dataLength; i++) {
            pnldata.push([
                data[i][0], // the date
                data[i][2] // cumulativepnl  data[i][1], // pnl  
            ]);
        }
        selector.highcharts({
            chart: {
                borderColor: null,
                borderWidth: null,
                type: 'line',
                plotBackgroundColor: '#E5E4E2',
                plotBorderColor: '#0000A0',
                plotBorderWidth: 2,
                plotShadow: false
            },
            plotOptions: {
                column: {
                    colorByPoint: true
                }
            },
            title: {
                text: 'Cumulative P&L for ' + yr,
                style: {
                    color: '#0000A0',
                    fontWeight: 'bold',
                    fontSize: '14px',
                    fontFamily: 'Arial, Helvetica, sans-serif',
                    fontStyle: 'italic'
                }
            },
            subtitle: {
                text: 'Account: ' + acctname,
                style: {
                    color: '#0000A0',
                    fontWeight: 'bold',
                    fontSize: '11px',
                    fontFamily: 'Arial, Helvetica, sans-serif',
                    fontStyle: 'italic'
                }
            },
            lineWidth: 2,
            xAxis: {
                type: 'datetime',
                labels: {
                    align: 'right',
                    style: {
                        color: '#000000',
                        fontWeight: 'bold',
                        fontSize: '10px',
                        fontFamily: 'Arial, Helvetica, sans-serif',
                        fontStyle: 'normal'
                    },
                    rotation:-60
                },
                tickInterval:480 * 3600 * 1000
            },
            yAxis: {
                title: {
                    text: 'Cumulative P&L',
                    style: {
                        color: '#0000A0',
                        fontWeight: 'bold',
                        fontSize: '11px',
                        fontFamily: 'Arial, Helvetica, sans-serif',
                        fontStyle: 'normal'
                    }
                },
                labels: {
                    align:'right',
                    style: {
                        color: '#000000',
                        fontWeight: 'bold',
                        fontSize: '10px',
                        fontFamily: 'Arial, Helvetica, sans-serif',
                        fontStyle: 'normal'
                    },
                    format: '$ {value}'
                }
            },
            credits: {
                enabled:false
            },
            legend: {
                enabled: false
            },
            series: [{
                type: 'column',
                data: pnldata
            }]
        });
    }

This is where you create your data array:

        pnldata.push([
            data[i][0], // the date
            data[i][2] // cumulativepnl  data[i][1] is the day's pnl
        ]);

You need to change from array to object, so you will be able to set individual color, for example:

        pnldata.push({
            x: data[i][0], // the date
            y: data[i][2], // cumulativepnl  data[i][1] is the day's pnl
            color: 'someColor'
        });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM