CODEWITHSUNDEEP
javascripthighcharts
Thunfische
Thunfische

Reputation: 1157

How do I remove unused xaxis values from Highcharts?

https://jsfiddle.net/dcfmL4br/

 series: [{
    name:'İstanbul',
        data: [
            { x: 1246665600000, y: 100, z: 20.8,  country: 'İstanbul' },
              { x: 1246752000000, y: 95, z: 23.8,  country: 'İstanbul' },

        ],
        color:Highcharts.getOptions().colors[2]
    },
    {
    name:'Ankara',
        data: [
            { x: 1246665600000, y: 96, z: 10.8,  country: 'Ankara' },
              { x: 1246752000000, y: 97, z: 13.8,  country: 'Ankara' },

        ],
        color:Highcharts.getOptions().colors[3]
    }
    ]

I have a series like that for fourth of july and fifth of july. But between these points, hours are shown. How do I hide xaxis points when there is no corresponding y axis value for them?

Upvotes: 0

Views: 172

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

In labels.formatter function you can loop through series points to find out whether the current value is used:

xAxis: {
    ...,
    labels: {
        formatter: function() {
            var series = this.chart.series,
                s,
                p,
                usedValue;

            for (s of series) {
                if (usedValue) {
                    break;
                }
                for (p of s.xData) {
                    if (p === this.pos) {
                        usedValue = true;
                        break;
                    }
                }
            }

            if (usedValue) {
                return Highcharts.dateFormat(this.dateTimeLabelFormat, this.pos)
            }

        }
    }
}

Live demo: https://jsfiddle.net/BlackLabel/db8pqLty/

API Reference:

https://api.highcharts.com/class-reference/Highcharts#.dateFormat

https://api.highcharts.com/highcharts/xAxis.labels.formatter

Upvotes: 1

Related Questions