highstock example

Setting Individual Point color in Series for Highstock API

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

I was working on Highstock, I tried to set a color to a specific point in “data” in Highstock, like in the example,the example is implemented using Highchart API,but I couldn’t get it to work with Highstock API, no matter how I set the color, it doesn’t show on the graph.

Thanks for stackoverflow, someone helped me.


It’s important to put marker enable in the plotOptions, otherwise it won’t work.

 plotOptions: {
        series: {
            marker: {
                enabled: true    
            }
        }
    },
$(function () {
    var seriesSetting=[{name:"aaa",
            data: [{x: 1343862840000,y: 4.447361},{x:1343863200000,y:5,marker:{fillColor:'red'}},{x:1343873200000,y:8}]
        }];
    var chart = new Highcharts.StockChart({
        useUTC:false,
                showLoading:"loading",
                chart:{
                    renderTo:'container',
                    type:'spline',
                    events:{
                        load: function(chart) {
                            this.setTitle(null, {
                                text: 'Built chart at '+ (new Date() - start) +'ms'
                            });
                        }

                    }
                },
                legend:{
                    enabled:true,
                    showInLegend:true,
                    layout:'vertical',
                    align:'right',
                    verticalAlign:'top',
                    x:-10,
                    y:100,
                    borderWidth:0
                },
                rangeSelector:{
                    enabled:false
                },         
                xAxis:{
                    title:{
                        text:'time'
                    },

                    //    tickLength:100,
                    ordinal: false,
                    type:'datetime',
                },
                tooltip:{
                    shared:false,
                    shadow:false,
                    style:{
                        //  color:'#333333',
                        fontSize:'9pt',
                        padding:'5px'
                    }
                },
                yAxis:{
                    title:"value"
                },
                plotOptions:{
                    series:{turboThreshold: 99999,  marker: {
                           enabled: true
                       }
                    }},
                series:seriesSetting
    });
});

Leave a Reply

Your email address will not be published. Required fields are marked *