Highchart advance formatting of x-Axis datetime labels

0
votes

I have requirement to extend date label formatting to show time period beside date when value is measured.

You can see on image how it should look.

enter image description here

Any way to achieve this by using format function of Highchart API?

EDIT: I need implementation without using third party solutions, since I need to embed solution into jasper report.

Thanks

1
javascripthighchartsjasper-reports
To group labels I think you should use this plugin - Core972
Your link looks like solution, but I did not want to pollute question with jasper reporting tag, as I need this implementation be pure javascript in highchart library, so I can embed it inside report easily. Cannot use third part libraries. - Minja
Its an Highcharts plugin you can use it like all others modules made for Highcharts. - Core972

1 Answers

1
votes

As an alternative to use 'grouped categories' plugin, you can create additional xAxis labels by Highcharts. SVGRenderer. 

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

            Highcharts.objectEach(ticks, function(tick) {
                if ((tick.pos + 2) % 3 === 0) {
                    xy = tick.label.xy;

                    chart.renderer.text('date', xy.x, xy.y + 20)
                        .attr({
                            'align': 'center'
                        })
                        .add();
                }
            });
        }
    }
},

Live example: http://jsfiddle.net/BlackLabel/f7c54zop/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text