Highchart and Highstock dateFormat function format example

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.

Highcharts will automatically try to find the best format for the current zoom-range. This is done if the xAxis has the type 'datetime'. Next the unit of the current zoom is calculated, it could be one of:

  • second
  • minute
  • hour
  • day
  • week
  • month
  • year

This unit is then used find a format for the axis labels. The default patterns are:
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'

If you want the day to be part of the “hour”-level labels you should change the dateTimeLabelFormatsoption for that level include %d or %e. These are the available patters:

  • %a: Short weekday, like ‘Mon’.
  • %A: Long weekday, like ‘Monday’.
  • %d: Two digit day of the month, 01 to 31.
  • %e: Day of the month, 1 through 31.
  • %b: Short month, like ‘Jan’.
  • %B: Long month, like ‘January’.
  • %m: Two digit month number, 01 through 12.
  • %y: Two digits year, like 09 for 2009.
  • %Y: Four digits year, like 2009.
  • %H: Two digits hours in 24h format, 00 through 23.
  • %I: Two digits hours in 12h format, 00 through 11.
  • %l (Lower case L): Hours in 12h format, 1 through 11.
  • %M: Two digits minutes, 00 through 59.
  • %p: Upper case AM or PM.
  • %P: Lower case AM or PM.
  • %S: Two digits seconds, 00 through 59

Example toolkip format:

tooltip:{
                        useHTML: true,
                        formatter: function() {
                            var d = new Date(this.x);
                            var s = '';
                            s+='<b>Time:'+Highcharts.dateFormat('%Y-%B-%d %H:%M:%S.',  this.x)  +d.getMilliseconds()+'</b>';
                            $.each(this.points, function(i, point) {
                                s += '
<span style="color: '+point.series.color+';">'+point.series.name +'</span>'+': '+
                                    point.y;
                            });
                            return s;
                        },
                    shared: true
                }

http://www.highcharts.com/ref/#xAxis–dateTimeLabelFormats

Read More

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
    });
});

Read More