Geek Answers Handbook

How to format x-axis label in highcharts

I have the following high-performance output: enter image description here

I just want to see Feb-10, not February-10 18:00 in the x-axis label. This way all xaxis tags will look like feb-10, feb-12, etc. But the tooltip will be the same as the output screen. How can I format xaxis to get february-10, feb-12, etc. Instead of Feb-10 18:00, Feb-12 20:00, etc.

$(function () { $('#container').highcharts({ chart: { zoomType: 'xy', spacingRight: 20 }, credits: { enabled: false }, title: { text: '' }, xAxis: { type: 'datetime', labels: { overflow: 'justify' }, startOnTick: true, showFirstLabel: true, endOnTick: true, showLastLabel: true, categories: dateAndTimeArray, tickInterval: 10, labels: { rotation: 0.1, align: 'left', step: 10, enabled: true }, style: { fontSize: '8px' } }, yAxis: { title: { text: 'Measurement value' } }, tooltip: { xDateFormat: '%Y-%m-%d %H:%M', shared: true }, legend: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, lineWidth: 1, marker: { enabled: false }, shadow: false, states: { hover: { lineWidth: 1 } }, // threshold: null } }, series: [{ type: 'line', name: 'Value', data: chartData, marker: { enabled: false } }] }); });
+8
format highcharts
source share
1 answer

Cool, try the following:

Add this formatter to your xAxis labels object:

 xAxis { ... labels: { ... formatter: function() { return this.value.toString().substring(0, 6); }, } }

Link: http://jsfiddle.net/tn6Kw/9/

+21
source share

More articles:


All Articles