Limit or re-format x-axis items?

[bobbytb]

Hi,

Highcharts seems to be doing a perfect job. I think its the best charting library!
I have a question... Is it possible to limit the labels displayed on the x-axis? Or reformat them (e.g. so that they may be shown at another angle)?
I have a attached a screenshot of my graph, and if you see the text on the bottom x-axis, its all on-top of each other. This is because each label item is quite long and they overlap over each other. The x-axis data date/time and shown every 30mins:

Code: Select all

xAxis: {
categories: ["2010-01-25 00:15:24", "2010-01-25 00:45:24", "2010-01-25 01:15:24", "2010-01-25 01:45:24", "2010-01-25 02:15:24", "2010-01-25 02:45:24", "2010-01-25 03:15:24", "2010-01-25 03:45:24", "2010-01-25 04:15:24", "2010-01-25 04:45:24", ],
title: {
text: 'Datetime'
}
}, 

I dont mind limiting the x-axis labels so the only display 3 or 4 labels instead of all of them. Or, is there any other better way of doing this? Any suggestions would be welcome.

Overlapping x-axis labels

Data.png (107.94 KiB) Viewed 21747 times

[torstein.honsi]

Thanks! The easiest way would be to rotate them. See http://highcharts.com/demo/?example=col ... me=default and view the options using the "View options" button.

[AndrewP]

Hi,

If I want to have many line points (about 300 or more) on my graph can I display only - lets say - every 10th or 20th tick mark on X axis and a label only for these tick marks ?

Andrew

[torstein.honsi]

Highcharts does that automatically, but not if you define categories for the x axis. Instead, define an x value for each point. See http://highcharts.com/ref/#series => data.

If your points are evenly spaced, check out http://highcharts.com/ref/#plotOptions-line => pointStart and => pointInterval.

[AndrewP]

In my case my X axis is to show date stamps in for each day in a year in a format like: 23AUG10. So there would be many overlapping day stamps. And presently, if understand well, in the HightCharts there is no way to show only those stamps that will not overlap.

Am I right ?

[torstein.honsi]

If you set your desired tickPixelInterval on the x axis, Highcharts will show the ticks with your desired spacing. With datetime axes, Highcharts will always land the ticks on logic places like on the 1st of each month, every second monday, every monday etc.

Then, format the date like this:

Code: Select all

formatter: {
	return Highcharts.dateFormatter('%d%b%y', this.value).toUpperCase();
}

You can rotate the labels for closer spacing.

[AndrewP]

I tried various tricks and still I cannot display the X axis labels in the format e.g DD-MMM-YY. Here's below is my code. Maybe something minor needs be changed to make my labels display the way I want ????

Code: Select all

      $(document).ready(function() {
        var chart = new Highcharts.Chart({
          chart: {
            renderTo: 'container',
            defaultSeriesType: 'line'
          },
          title: {  text: 'MyTitle' },
          xAxis: {
            type: 'datetime',
            tickPixelInterval: 200, // ???
            dateTimeLabelFormats : {
              year: '%Y',
              month: '%b %y',
              day: '%e. %b'
            },
            formatter: function() {
              return Highcharts.dateFormatter('%d%b%y', this.value).toUpperCase();
            }
          },
          yAxis: { title: { text: 'Y Axis' } },
          tooltip: {
            formatter: function() {
              return this.x + ':'+this.y;
            }
          },
          plotOptions: {
            line: {
              lineWidth: 2,
              pointInterval: 300000*24 // one day ??
            }
          },
          series: [{
              name: 'MyData:',
              data:
                [
                { name: '12/2/2009',  y: 3.0},
                { name: '13.2.2009',  y: 3.1},
                { name: '14/2/2009',  y: 3.5},
                { name: '15/3/2009',  y: 3.9},
                { name: '5/7/2009',   y: 2.1},
                { name: '8/7/2009',   y: 3.7},
                { name: '8/10/2009',  y: 1.7},
                { name: '10/10/2009', y: 2.7},
                { name: '12/10/2009', y: 3.7},
                { name: '13/10/2009', y: 4.7},
                { name: '14/10/2009', y: 5.7}
              ]
            }]
        });
      });

[torstein.honsi]

Try xAxis.labels.formatter, like this:

Code: Select all

          $(document).ready(function() {
            var chart = new Highcharts.Chart({
              chart: {
                renderTo: 'container',
                defaultSeriesType: 'line'
              },
              title: {  text: 'MyTitle' },
              xAxis: {
                type: 'datetime',
                tickPixelInterval: 200, // ???
                dateTimeLabelFormats : {
                  year: '%Y',
                  month: '%b %y',
                  day: '%e. %b'
                },
                labels: {
                  formatter: function() {
                    return Highcharts.dateFormatter('%d%b%y', this.value).toUpperCase();
                  }
                }
              },
              yAxis: { title: { text: 'Y Axis' } },
              tooltip: {
                formatter: function() {
                  return this.x + ':'+this.y;
                }
              },
              plotOptions: {
                line: {
                  lineWidth: 2,
                  pointInterval: 300000*24 // one day ??
                }
              },
              series: [{
                  name: 'MyData:',
                  data:
                    [
                    { name: '12/2/2009',  y: 3.0},
                    { name: '13.2.2009',  y: 3.1},
                    { name: '14/2/2009',  y: 3.5},
                    { name: '15/3/2009',  y: 3.9},
                    { name: '5/7/2009',   y: 2.1},
                    { name: '8/7/2009',   y: 3.7},
                    { name: '8/10/2009',  y: 1.7},
                    { name: '10/10/2009', y: 2.7},
                    { name: '12/10/2009', y: 3.7},
                    { name: '13/10/2009', y: 4.7},
                    { name: '14/10/2009', y: 5.7}
                  ]
                }]
            });
          });

[torstein.honsi]

Okay, I see now that your x values are not dates, so they will be auto-assigned x values like 0, 1, 2. Dateformatting those values will not work. Perhaps you should go back to using categories and just rotate them?

[AndrewP]

Hi,

Thanks for your patience dealing with my isue.

You said that my x values are not dates. So what are they ?? And then can you give an example of x-values to be dates ??

Andrew

[torstein.honsi]

When you had categories for the x axis they were categories. When that was removed, they were just integers. See http://www.highcharts.com/demo/?example ... me=default for a true time series chart.

[AndrewP]

Here we go !!! Now things are under control. The example you gave me explains everything.

Thanks a lot.

Andrew