CODEWITHSUNDEEP
highcharts
Sonko Dmitry
Sonko Dmitry

Reputation: 3

Highcharts x series group

Help me guys. I have much data with 6 months interval. How I can group it in X with moth interval?

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        plotOptions: {
            spline: {
                marker:{
                    enabled: false
                }
            }
        },
        series: [{
            type: 'spline',
            data: [
                [Date.UTC(2010, 0, 1), 29.9],
                [Date.UTC(2010, 0, 3), 29.9],
                [Date.UTC(2010, 0, 10), 29.9],
                [Date.UTC(2010, 1, 1), 71.5],
                [Date.UTC(2010, 1, 5), 29.9],
                [Date.UTC(2010, 2, 1), 106.4]
            ]
        }]
    });
});

https://jsfiddle.net/L2g2uzz3/3/ For example, I want to receive January, February and March labels in X axe

Upvotes: 0

Views: 224

Answers (1)

IsraGab
IsraGab

Reputation: 5175

I understand you would like to display in your xAxis the name of the month for each data.

Since you want to display only the month and you have many data on the same month, you have to play with 2 attributes of the Highcharts API: formatter & tickPositioner.

  • formatter: use this function when you want to format data. Here you want to display name instead of timeValue more info here
  • tickPositioner: use it in order to set the tick (label position on the axis). In our case, we may have multiple ticks and same labels so we have to filter them. see the Highcharts doc for more info

In the label property of xAxis, add:

labels:{
              formatter: function(){
                        return monthNames[new Date(this.value).getMonth()];
                       }    
                  },
            tickPositioner: function () {
                var positions = [];
                var month = [];
                for(var i = 0; i < this.series[0].xData.length; i++){
                        if(month.indexOf(new Date(this.series[0].xData[i]).getMonth()) == -1){
                                positions.push(this.series[0].xData[i]);
                        month.push(new Date(this.series[0].xData[i]).getMonth());
                        }
                }
                return positions;
            }
        },

Also don't forget to init the monthNames array

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

You can see your update FIDDLE

Let me know if it was helpful

Upvotes: 1

Related Questions