CODEWITHSUNDEEP
highcharts
J2G
J2G

Reputation: 17

Not able to view the last label in xaxis

We are creating a line chart for which we are facing some issues. xaxis title is not getting populated for some last values, and this is plotted in the chart, but not been displayed in the label part. Please do help us in providing some solution for it. Have the issue here : http://jsfiddle.net/58jy1zhd/1/

$(function () {
    $('#container').highcharts({
    xAxis: {
            categories: ["20-04-2015, 6:55 PM","20-04-2015, 7:00 PM","20-04-2015, 7:05 PM","20-04-2015, 7:10 PM","20-04-2015, 7:15 PM","20-04-2015, 7:20 PM","20-04-2015, 7:25 PM","20-04-2015, 7:30 PM","20-04-2015, 7:35 PM","20-04-2015, 7:40 PM","20-04-2015, 7:45 PM","20-04-2015, 7:50 PM","20-04-2015, 7:55 PM","20-04-2015, 8:00 PM","20-04-2015, 8:05 PM","20-04-2015, 8:10 PM","20-04-2015, 8:15 PM","20-04-2015, 8:20 PM","20-04-2015, 8:25 PM","20-04-2015, 8:30 PM","20-04-2015, 8:35 PM","20-04-2015, 8:40 PM","20-04-2015, 8:45 PM","20-04-2015, 8:50 PM","20-04-2015, 8:55 PM","20-04-2015, 9:00 PM","20-04-2015, 9:05 PM","20-04-2015, 9:10 PM","20-04-2015, 9:15 PM","20-04-2015, 9:20 PM","20-04-2015, 9:25 PM","20-04-2015, 9:30 PM","20-04-2015, 9:35 PM","20-04-2015, 9:40 PM","20-04-2015, 9:45 PM","20-04-2015, 9:50 PM","20-04-2015, 9:55 PM","20-04-2015, 10:00 PM","20-04-2015, 10:05 PM","20-04-2015, 10:10 PM","20-04-2015, 10:15 PM","20-04-2015, 10:20 PM","20-04-2015, 10:25 PM","20-04-2015, 10:30 PM","20-04-2015, 10:35 PM","20-04-2015, 10:40 PM","20-04-2015, 10:45 PM","20-04-2015, 10:50 PM","20-04-2015, 10:55 PM","20-04-2015, 11:00 PM","20-04-2015, 11:05 PM","20-04-2015, 11:10 PM","20-04-2015, 11:15 PM","20-04-2015, 11:20 PM","20-04-2015, 11:25 PM","20-04-2015, 11:30 PM","20-04-2015, 11:35 PM","20-04-2015, 11:40 PM","20-04-2015, 11:45 PM","20-04-2015, 11:50 PM","20-04-2015, 11:55 PM","21-04-2015, 12:00 AM","21-04-2015, 12:05 AM","21-04-2015, 12:10 AM","21-04-2015, 12:15 AM","21-04-2015, 12:20 AM","21-04-2015, 12:25 AM","21-04-2015, 12:30 AM","21-04-2015, 12:35 AM","21-04-2015, 12:40 AM","21-04-2015, 12:45 AM","21-04-2015, 12:50 AM","21-04-2015, 12:55 AM","21-04-2015, 1:00 AM","21-04-2015, 1:05 AM","21-04-2015, 1:10 AM","21-04-2015, 1:15 AM","21-04-2015, 1:20 AM","21-04-2015, 1:25 AM","21-04-2015, 1:30 AM","21-04-2015, 1:35 AM","21-04-2015, 1:40 AM","21-04-2015, 1:45 AM","21-04-2015, 1:50 AM","21-04-2015, 1:55 AM","21-04-2015, 2:00 AM","21-04-2015, 2:05 AM","21-04-2015, 2:10 AM","21-04-2015, 2:15 AM","21-04-2015, 2:20 AM","21-04-2015, 2:25 AM","21-04-2015, 2:30 AM","21-04-2015, 2:35 AM","21-04-2015, 2:40 AM","21-04-2015, 2:45 AM","21-04-2015, 2:50 AM","21-04-2015, 2:55 AM","21-04-2015, 3:00 AM","21-04-2015, 3:05 AM","21-04-2015, 3:10 AM","21-04-2015, 3:15 AM","21-04-2015, 3:20 AM","21-04-2015, 3:25 AM","21-04-2015, 3:30 AM","21-04-2015, 3:35 AM","21-04-2015, 3:40 AM","21-04-2015, 3:45 AM","21-04-2015, 3:50 AM","21-04-2015, 3:55 AM","21-04-2015, 4:00 AM","21-04-2015, 4:05 AM","21-04-2015, 4:10 AM","21-04-2015, 4:15 AM","21-04-2015, 4:20 AM","21-04-2015, 4:25 AM","21-04-2015, 4:30 AM","21-04-2015, 4:35 AM","21-04-2015, 4:40 AM","21-04-2015, 4:45 AM","21-04-2015, 4:50 AM","21-04-2015, 4:55 AM","21-04-2015, 5:00 AM","21-04-2015, 5:05 AM","21-04-2015, 5:10 AM","21-04-2015, 5:15 AM","21-04-2015, 5:20 AM","21-04-2015, 5:25 AM","21-04-2015, 5:30 AM","21-04-2015, 5:35 AM","21-04-2015, 5:40 AM","21-04-2015, 5:45 AM","21-04-2015, 5:50 AM","21-04-2015, 5:55 AM","21-04-2015, 6:00 AM","21-04-2015, 6:05 AM","21-04-2015, 6:10 AM","21-04-2015, 6:15 AM","21-04-2015, 6:20 AM","21-04-2015, 6:25 AM","21-04-2015, 6:30 AM","21-04-2015, 6:35 AM","21-04-2015, 6:40 AM","21-04-2015, 6:45 AM","21-04-2015, 6:50 AM","21-04-2015, 6:55 AM","21-04-2015, 7:00 AM","21-04-2015, 7:05 AM","21-04-2015, 7:10 AM","21-04-2015, 7:15 AM","21-04-2015, 7:20 AM","21-04-2015, 7:25 AM","21-04-2015, 7:30 AM","21-04-2015, 7:35 AM","21-04-2015, 7:40 AM","21-04-2015, 7:45 AM","21-04-2015, 7:50 AM","21-04-2015, 7:55 AM","21-04-2015, 8:00 AM","21-04-2015, 8:05 AM","21-04-2015, 8:10 AM","21-04-2015, 8:15 AM","21-04-2015, 8:20 AM","21-04-2015, 8:25 AM","21-04-2015, 8:30 AM","21-04-2015, 8:35 AM","21-04-2015, 8:40 AM","21-04-2015, 8:45 AM","21-04-2015, 8:50 AM","21-04-2015, 8:55 AM","21-04-2015, 9:00 AM","21-04-2015, 9:05 AM","21-04-2015, 9:10 AM","21-04-2015, 9:15 AM","21-04-2015, 9:20 AM","21-04-2015, 9:25 AM","21-04-2015, 9:30 AM","21-04-2015, 9:35 AM","21-04-2015, 9:40 AM","21-04-2015, 9:45 AM","21-04-2015, 9:50 AM","21-04-2015, 9:55 AM","21-04-2015, 10:00 AM","21-04-2015, 10:05 AM","21-04-2015, 10:10 AM","21-04-2015, 10:15 AM","21-04-2015, 10:20 AM","21-04-2015, 10:25 AM","21-04-2015, 10:30 AM","21-04-2015, 10:35 AM","21-04-2015, 10:40 AM","21-04-2015, 10:45 AM","21-04-2015, 10:50 AM","21-04-2015, 10:55 AM","21-04-2015, 11:00 AM","21-04-2015, 11:05 AM","21-04-2015, 11:10 AM","21-04-2015, 11:15 AM","21-04-2015, 11:20 AM","21-04-2015, 11:25 AM","21-04-2015, 11:30 AM","21-04-2015, 11:35 AM","21-04-2015, 11:40 AM","21-04-2015, 11:45 AM","21-04-2015, 11:50 AM","21-04-2015, 11:55 AM","21-04-2015, 12:00 PM","21-04-2015, 12:05 PM","21-04-2015, 12:10 PM","21-04-2015, 12:15 PM","21-04-2015, 12:20 PM","21-04-2015, 12:25 PM","21-04-2015, 12:30 PM","21-04-2015, 12:35 PM","21-04-2015, 12:40 PM","21-04-2015, 12:45 PM","21-04-2015, 12:50 PM","21-04-2015, 12:55 PM","21-04-2015, 1:00 PM","21-04-2015, 1:05 PM","21-04-2015, 1:10 PM","21-04-2015, 1:15 PM","21-04-2015, 1:20 PM","21-04-2015, 1:25 PM","21-04-2015, 1:30 PM","21-04-2015, 1:35 PM","21-04-2015, 1:40 PM","21-04-2015, 1:45 PM","21-04-2015, 1:50 PM","21-04-2015, 1:55 PM","21-04-2015, 2:00 PM","21-04-2015, 2:05 PM","21-04-2015, 2:10 PM","21-04-2015, 2:15 PM","21-04-2015, 2:20 PM","21-04-2015, 2:25 PM","21-04-2015, 2:30 PM","21-04-2015, 2:35 PM","21-04-2015, 2:40 PM","21-04-2015, 2:45 PM","21-04-2015, 2:50 PM","21-04-2015, 2:55 PM"],
            title: {
            text: 'Time'
            },
            labels: {
            rotation: -90,
            },
            showLastLabel: true,
            endOnTick: true
        },
    series: [{
            name: 'TEST',
            data: [124.22,125.67,127.12,122.77,122.77,121.33,121.33,119.89,122.77,122.77,124.22,121.33,122.77,124.22,121.33,119.89,119.89,119.89,122.77,119.89,118.46,118.46,119.89,119.89,122.77,121.33,121.33,121.33,122.77,121.33,122.77,121.33,121.33,124.22,119.89,119.89,121.33,121.33,122.77,119.89,118.46,118.46,119.89,117.03,118.46,117.03,119.89,117.03,117.03,118.46,118.46,121.33,121.33,122.77,122.77,121.33,125.67,124.22,127.12,125.67,124.22,128.58,125.67,127.12,122.77,127.12,121.33,121.33,115.6,111.35,112.76,105.74,107.14,107.14,104.35,100.2,98.83,101.58,100.2,97.45,97.45,96.09,94.72,93.36,93.36,94.72,96.09,93.36,93.36,92.01,93.36,92.01,92.01,92.01,94.72,92.01,89.31,89.31,90.66,92.01,87.97,87.97,89.31,87.97,90.66,89.31,89.31,90.66,89.31,90.66,92.01,90.66,86.63,87.97,89.31,89.31,86.63,89.31,87.97,87.97,86.63,86.63,87.97,85.29,87.97,87.97,87.97,87.97,86.63,87.97,86.63,87.97,85.29,86.63,86.63,85.29,86.63,85.29,86.63,87.97,86.63,86.63,85.29,85.29,85.29,83.96,85.29,85.29,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,83.96,82.63,83.96,82.63,81.31,82.63,83.96,82.63,82.63,82.63,79.98,81.31,81.31,82.63,82.63,81.31,81.31,81.31,81.31,81.31,82.63,81.31,81.31,79.98,79.98,79.98,81.31,79.98,79.98,79.98,79.98,79.98,79.98,79.98,79.98,79.98,78.67,79.98,79.98,78.67,78.67,79.98,78.67,82.63,79.98,78.67,79.98,78.67,78.67,77.35,78.67,77.35,78.67,78.67,78.67,79.98,83.96,90.66,92.01,94.72,97.45,100.2,102.96,105.74,101.58,98.83,96.09,94.72,93.36,92.01,89.31,90.66,89.31,86.63,85.29,86.63,85.29,85.29,85.29,82.63,83.96,82.63,82.63]
        }]
    });
});

The chart in this URL shows the last xaxis value as 243 instead of "21-04-2015, 2:55 PM" value, which is the last in the series. Have tried with :

showLastLabel: true, endOnTick: true

but no luck.

Thanks in advance, Naveen.

Upvotes: 1

Views: 1011

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

This is happening because you have too many labels you're trying to display on the axis. It is only showing every third label right now, and the way it ends, the last two categories are not in the loop.

There are two things you can do.

1) reduce your font size for the labels, and take a look at the step and tickInterval properties.

Example:

But really, that's just kind of silly. That's way too many labels to make sense of, and it uses a full half of the visual real estate to display them, and has to display them sideways, making it even harder to make sense of.

So I recommend 2) use a date time axis. You have all of the date information. You can either pass those dates as the x values of your data, or, if they're always going to be uniform (ie the same distance apart), as they appear to be already, you can use the pointStart and pointInterval properties.

Example:

It doesn't show every label. But it's pretty futile, and ultimately useless to try showing every label of a time series.

You can manipulate the axis to make sure it shows the first and last, and you can format the label output to include the date portion, or any other thing that you want it to.

[[edit to add label formatting reference links:

Example using the formatter function to display date and time for each tick, with a tick every 4 hours:

Upvotes: 2

Related Questions