CODEWITHSUNDEEP
javascripthighchartsjasper-reports
Minja
Minja

Reputation: 1222

Highchart advance formatting of x-Axis datetime labels

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

Upvotes: 0

Views: 129

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

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

Upvotes: 1

Related Questions