"Datetime" x-axis: emphasising labels at major tick points

[martinu]

I'm modifying some inherited Javascript code for a Highcharts graph which defines an axis as being of type datetime. The period of time covered by the axis is 48 hours, so axis labels are HH:MM at 3-hour points, except for midnight which is automatically labelled with the date instead of 00:00.

I'd like to find a way of emphasising the date labels (the 00:00 point) to make it stand out from the rest of the labels - particularly when the graph is viewed on a small phone/tablet screen where the text of the labels is not easy to read.

The code is:

Code: Select all

var doTemp = function () {
    var freezing = config.temp.units === 'C' ? 0 : 32;
    var options = {
	chart: {
	    renderTo: 'chartcontainer',
	    type: 'line',
	    alignTicks: false
	},
	title: {text: 'Temperature'},
	credits: {enabled: false},
[b]	xAxis: {
	    type: 'datetime',
	    ordinal: false,
	    dateTimeLabelFormats: {
		day: '%e %b',
		week: '%e %b %y',
		month: '%b %y',
		year: '%Y'[/b]
	    }
	},
	yAxis: [{
		// left
		title: {text: 'Temperature (°' + config.temp.units + ')'},
		opposite: false,
		labels: {
		    align: 'right',
		    x: -5,
		    formatter: function () {
			return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
		    }
		},
		plotLines: [{
			// freezing line
			value: freezing,
			color: 'rgb(0, 0, 180)',
			width: 1,
			zIndex: 2
		    }]
	    }, {
		// right
		linkedTo: 0,
		gridLineWidth: 0,
		opposite: true,
		title: {text: null},
		labels: {
		    align: 'left',
		    x: 5,
		    formatter: function () {
			return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
		    }
		}
	    }],
	legend: {enabled: true},
	plotOptions: {
	    series: {
		dataGrouping: {
		    enabled: false
		},
		states: {
		    hover: {
			halo: {
			    size: 5,
			    opacity: 0.25
			}

		    }
		},
		cursor: 'pointer',
		marker: {
		    enabled: false,
		    states: {
			hover: {
			    enabled: true,
			    radius: 0.1
			}
		    }
		}
	    },
	    line: {lineWidth: 2}
	},
	tooltip: {
	    shared: true,
	    crosshairs: true,
	    valueSuffix: ' °' + config.temp.units,
	    valueDecimals: config.temp.decimals,
	    xDateFormat: "%A, %e %b, %H:%M"
	},
	series: [{
		name: 'Temperature',
		zIndex: 99
	    }, {
		name: 'Dew Point',
		visible: false
	    }, {
		name: 'Apparent',
		visible: false
	    }, {
		name: 'Wind Chill',
		visible: false
			}, {
		name: 'Heat Index',
		visible: false
	    }, {
		name: 'Inside'
	    }],
	rangeSelector: {
	    buttons: [{
		    count: 6,
		    type: 'hour',
		    text: '6h'
		}, {
		    count: 12,
		    type: 'hour',
		    text: '12h'
		}, {
		    type: 'all',
		    text: 'All'
		}],
	    inputEnabled: false
	}
    };

    chart = new Highcharts.StockChart(options);
    chart.showLoading();

    $.ajax({
	url: 'tempdata.json',
	cache: false,
	dataType: 'json',
	success: function (resp) {
	    chart.hideLoading();
	    chart.series[0].setData(resp.temp);
	    chart.series[1].setData(resp.dew);
	    chart.series[2].setData(resp.apptemp);
	    chart.series[3].setData(resp.wchill);
	    chart.series[4].setData(resp.heatindex);
	    chart.series[5].setData(resp.intemp);
	}
    });
};

I've out the relevant x-axis definition in bold. The output at present is



It would be useful if the labels "17 Oct" and "18 Oct" could be displaced vertically (eg with a longer tick mark), and made bold or in a larger font - or both. Can this be done?

[wojtek]

Hi martinu,

To change styles of particular label you can simply add custom css or attributes to it (label is an SVGElement). All labels plotted on the chart can be found in xAxis.ticks object. Check the demo and code example I posted you below:

Code: Select all

    var labels = ['1535328000000', '1537747200000'];

    chart: {
      events: {
        render: function() {
          var chart = this,
            xAxis = chart.xAxis[0],
            ticks = xAxis.ticks,
            date;

          labels.forEach(function(elem) {
            ticks[elem].label
              .translate(0, 3)
              .attr({
                rotation: -20
              })
              .css({
                color: 'red',
                fontSize: '12px'
              });
          });
        }
      }
    }

Demo:
https://jsfiddle.net/wchmiel/ewgu3t5L/

Api reference:
https://api.highcharts.com/class-refere ... SVGElement

Increasing particular tick length:
https://stackoverflow.com/questions/278 ... highcharts

Kind regards.