X-Axis Extra Space

Anyone know what the extra space at the end of the X-Axis is for? I have a chart set to 100% width and the last bar shown should be the end of the chart (with some space of course) but there appears to be a significant amount of extra space. The screenshots attached show the spacing at the front and the end to show the difference.



Hello
Could you provide your data to be loaded in a chart?

In the actual code it is loaded from my database but here is the JSON version of the data and the declaration of the chart.

var data = [
{ interval: "00:00", routes: 1 }
{ interval: "00:05", routes: 1 }
{ interval: "00:10", routes: 1 }
{ interval: "00:15", routes: 2 }
{ interval: "00:20", routes: 2 }
{ interval: "00:25", routes: 3 }
{ interval: "00:30", routes: 4 }
{ interval: "00:35", routes: 5 }
{ interval: "00:40", routes: 5 }
{ interval: "00:45", routes: 5 }
{ interval: "00:50", routes: 5 }
{ interval: "00:55", routes: 6 }
{ interval: "01:00", routes: 6 }
{ interval: "01:05", routes: 6 }
{ interval: "01:10", routes: 6 }
{ interval: "01:15", routes: 6 }
{ interval: "01:20", routes: 6 }
{ interval: "01:25", routes: 8 }
{ interval: "01:30", routes: 9 }
{ interval: "01:35", routes: 9 }
{ interval: "01:40", routes: 8 }
{ interval: "01:45", routes: 8 }
{ interval: "01:50", routes: 8 }
{ interval: "01:55", routes: 8 }
{ interval: "02:00", routes: 10 }
{ interval: "02:05", routes: 10 }
{ interval: "02:10", routes: 12 }
{ interval: "02:15", routes: 12 }
{ interval: "02:20", routes: 13 }
{ interval: "02:25", routes: 13 }
{ interval: "02:30", routes: 13 }
{ interval: "02:35", routes: 13 }
{ interval: "02:40", routes: 13 }
{ interval: "02:45", routes: 14 }
{ interval: "02:50", routes: 15 }
{ interval: "02:55", routes: 15 }
{ interval: "03:00", routes: 16 }
{ interval: "03:05", routes: 17 }
{ interval: "03:10", routes: 17 }
{ interval: "03:15", routes: 18 }
{ interval: "03:20", routes: 18 }
{ interval: "03:25", routes: 18 }
{ interval: "03:30", routes: 18 }
{ interval: "03:35", routes: 18 }
{ interval: "03:40", routes: 19 }
{ interval: "03:45", routes: 19 }
{ interval: "03:50", routes: 19 }
{ interval: "03:55", routes: 19 }
{ interval: "04:00", routes: 20 }
{ interval: "04:05", routes: 22 }
{ interval: "04:10", routes: 24 }
{ interval: "04:15", routes: 26 }
{ interval: "04:20", routes: 26 }
{ interval: "04:25", routes: 27 }
{ interval: "04:30", routes: 28 }
{ interval: "04:35", routes: 28 }
{ interval: "04:40", routes: 30 }
{ interval: "04:45", routes: 31 }
{ interval: "04:50", routes: 32 }
{ interval: "04:55", routes: 33 }
{ interval: "05:00", routes: 33 }
{ interval: "05:05", routes: 34 }
{ interval: "05:10", routes: 34 }
{ interval: "05:15", routes: 34 }
{ interval: "05:20", routes: 34 }
{ interval: "05:25", routes: 34 }
{ interval: "05:30", routes: 35 }
{ interval: "05:35", routes: 36 }
{ interval: "05:40", routes: 39 }
{ interval: "05:45", routes: 41 }
{ interval: "05:50", routes: 41 }
{ interval: "05:55", routes: 41 }
{ interval: "06:00", routes: 41 }
{ interval: "06:05", routes: 42 }
{ interval: "06:10", routes: 44 }
{ interval: "06:15", routes: 44 }
{ interval: "06:20", routes: 44 }
{ interval: "06:25", routes: 44 }
{ interval: "06:30", routes: 44 }
{ interval: "06:35", routes: 46 }
{ interval: "06:40", routes: 48 }
{ interval: "06:45", routes: 52 }
{ interval: "06:50", routes: 52 }
{ interval: "06:55", routes: 55 }
{ interval: "07:00", routes: 56 }
{ interval: "07:05", routes: 58 }
{ interval: "07:10", routes: 58 }
{ interval: "07:15", routes: 61 }
{ interval: "07:20", routes: 61 }
{ interval: "07:25", routes: 61 }
{ interval: "07:30", routes: 61 }
{ interval: "07:35", routes: 61 }
{ interval: "07:40", routes: 61 }
{ interval: "07:45", routes: 62 }
{ interval: "07:50", routes: 62 }
{ interval: "07:55", routes: 63 }
{ interval: "08:00", routes: 64 }
{ interval: "08:05", routes: 64 }
{ interval: "08:10", routes: 64 }
{ interval: "08:15", routes: 64 }
{ interval: "08:20", routes: 64 }
{ interval: "08:25", routes: 64 }
{ interval: "08:30", routes: 65 }
{ interval: "08:35", routes: 67 }
{ interval: "08:40", routes: 67 }
{ interval: "08:45", routes: 69 }
{ interval: "08:50", routes: 68 }
{ interval: "08:55", routes: 68 }
{ interval: "09:00", routes: 69 }
{ interval: "09:05", routes: 69 }
{ interval: "09:10", routes: 69 }
{ interval: "09:15", routes: 70 }
{ interval: "09:20", routes: 71 }
{ interval: "09:25", routes: 71 }
{ interval: "09:30", routes: 72 }
{ interval: "09:35", routes: 72 }
{ interval: "09:40", routes: 74 }
{ interval: "09:45", routes: 74 }
{ interval: "09:50", routes: 75 }
{ interval: "09:55", routes: 77 }
{ interval: "10:00", routes: 77 }
{ interval: "10:05", routes: 79 }
{ interval: "10:10", routes: 80 }
{ interval: "10:15", routes: 79 }
{ interval: "10:20", routes: 80 }
{ interval: "10:25", routes: 80 }
{ interval: "10:30", routes: 81 }
{ interval: "10:35", routes: 82 }
{ interval: "10:40", routes: 82 }
{ interval: "10:45", routes: 82 }
{ interval: "10:50", routes: 82 }
{ interval: "10:55", routes: 84 }
{ interval: "11:00", routes: 84 }
{ interval: "11:05", routes: 83 }
{ interval: "11:10", routes: 83 }
{ interval: "11:15", routes: 82 }
{ interval: "11:20", routes: 82 }
{ interval: "11:25", routes: 82 }
{ interval: "11:30", routes: 83 }
{ interval: "11:35", routes: 84 }
{ interval: "11:40", routes: 84 }
{ interval: "11:45", routes: 84 }
{ interval: "11:50", routes: 83 }
{ interval: "11:55", routes: 84 }
{ interval: "12:00", routes: 85 }
{ interval: "12:05", routes: 86 }
{ interval: "12:10", routes: 86 }
{ interval: "12:15", routes: 87 }
{ interval: "12:20", routes: 86 }
{ interval: "12:25", routes: 85 }
{ interval: "12:30", routes: 85 }
{ interval: "12:35", routes: 85 }
{ interval: "12:40", routes: 84 }
{ interval: "12:45", routes: 83 }
{ interval: "12:50", routes: 83 }
{ interval: "12:55", routes: 83 }
{ interval: "13:00", routes: 83 }
{ interval: "13:05", routes: 83 }
{ interval: "13:10", routes: 83 }
{ interval: "13:15", routes: 82 }
{ interval: "13:20", routes: 82 }
{ interval: "13:25", routes: 82 }
{ interval: "13:30", routes: 80 }
{ interval: "13:35", routes: 81 }
{ interval: "13:40", routes: 82 }
{ interval: "13:45", routes: 82 }
{ interval: "13:50", routes: 81 }
{ interval: "13:55", routes: 81 }
{ interval: "14:00", routes: 80 }
{ interval: "14:05", routes: 79 }
{ interval: "14:10", routes: 79 }
{ interval: "14:15", routes: 80 }
{ interval: "14:20", routes: 79 }
{ interval: "14:25", routes: 79 }
{ interval: "14:30", routes: 80 }
{ interval: "14:35", routes: 79 }
{ interval: "14:40", routes: 79 }
{ interval: "14:45", routes: 79 }
{ interval: "14:50", routes: 79 }
{ interval: "14:55", routes: 78 }
{ interval: "15:00", routes: 78 }
{ interval: "15:05", routes: 77 }
{ interval: "15:10", routes: 76 }
{ interval: "15:15", routes: 76 }
{ interval: "15:20", routes: 75 }
{ interval: "15:25", routes: 73 }
{ interval: "15:30", routes: 71 }
{ interval: "15:35", routes: 71 }
{ interval: "15:40", routes: 71 }
{ interval: "15:45", routes: 72 }
{ interval: "15:50", routes: 72 }
{ interval: "15:55", routes: 71 }
{ interval: "16:00", routes: 71 }
{ interval: "16:05", routes: 71 }
{ interval: "16:10", routes: 69 }
{ interval: "16:15", routes: 68 }
{ interval: "16:20", routes: 67 }
{ interval: "16:25", routes: 67 }
{ interval: "16:30", routes: 67 }
{ interval: "16:35", routes: 68 }
{ interval: "16:40", routes: 67 }
{ interval: "16:45", routes: 66 }
{ interval: "16:50", routes: 65 }
{ interval: "16:55", routes: 64 }
{ interval: "17:00", routes: 64 }
{ interval: "17:05", routes: 64 }
{ interval: "17:10", routes: 62 }
{ interval: "17:15", routes: 62 }
{ interval: "17:20", routes: 62 }
{ interval: "17:25", routes: 62 }
{ interval: "17:30", routes: 60 }
{ interval: "17:35", routes: 59 }
{ interval: "17:40", routes: 58 }
{ interval: "17:45", routes: 55 }
{ interval: "17:50", routes: 54 }
{ interval: "17:55", routes: 54 }
{ interval: "18:00", routes: 54 }
{ interval: "18:05", routes: 52 }
{ interval: "18:10", routes: 53 }
{ interval: "18:15", routes: 54 }
{ interval: "18:20", routes: 50 }
{ interval: "18:25", routes: 50 }
{ interval: "18:30", routes: 48 }
{ interval: "18:35", routes: 47 }
{ interval: "18:40", routes: 46 }
{ interval: "18:45", routes: 44 }
{ interval: "18:50", routes: 44 }
{ interval: "18:55", routes: 43 }
{ interval: "19:00", routes: 43 }
{ interval: "19:05", routes: 41 }
{ interval: "19:10", routes: 38 }
{ interval: "19:15", routes: 36 }
{ interval: "19:20", routes: 36 }
{ interval: "19:25", routes: 36 }
{ interval: "19:30", routes: 36 }
{ interval: "19:35", routes: 35 }
{ interval: "19:40", routes: 35 }
{ interval: "19:45", routes: 33 }
{ interval: "19:50", routes: 33 }
{ interval: "19:55", routes: 32 }
{ interval: "20:00", routes: 31 }
{ interval: "20:05", routes: 31 }
{ interval: "20:10", routes: 30 }
{ interval: "20:15", routes: 30 }
{ interval: "20:20", routes: 29 }
{ interval: "20:25", routes: 29 }
{ interval: "20:30", routes: 26 }
{ interval: "20:35", routes: 23 }
{ interval: "20:40", routes: 23 }
{ interval: "20:45", routes: 22 }
{ interval: "20:50", routes: 21 }
{ interval: "20:55", routes: 20 }
{ interval: "21:00", routes: 20 }
{ interval: "21:05", routes: 20 }
{ interval: "21:10", routes: 20 }
{ interval: "21:15", routes: 19 }
{ interval: "21:20", routes: 19 }
{ interval: "21:25", routes: 18 }
{ interval: "21:30", routes: 16 }
{ interval: "21:35", routes: 16 }
{ interval: "21:40", routes: 16 }
{ interval: "21:45", routes: 16 }
{ interval: "21:50", routes: 16 }
{ interval: "21:55", routes: 16 }
{ interval: "22:00", routes: 16 }
{ interval: "22:05", routes: 15 }
{ interval: "22:10", routes: 14 }
{ interval: "22:15", routes: 13 }
{ interval: "22:20", routes: 12 }
{ interval: "22:25", routes: 11 }
{ interval: "22:30", routes: 10 }
{ interval: "22:35", routes: 10 }
{ interval: "22:40", routes: 10 }
{ interval: "22:45", routes: 9 }
{ interval: "22:50", routes: 6 }
{ interval: "22:55", routes: 6 }
{ interval: "23:00", routes: 6 }
{ interval: "23:05", routes: 3 }
{ interval: "23:10", routes: 2 }
{ interval: "23:15", routes: 2 }
{ interval: "23:20", routes: 2 }
{ interval: "23:25", routes: 1 }
{ interval: "23:30", routes: 1 }
{ interval: "23:35", routes: 1 }
{ interval: "23:40", routes: 1 }
{ interval: "23:45", routes: 1 }
{ interval: "23:50", routes: 1 }
{ interval: "23:55", routes: 1 }
];
var barChart = new dhtmlXChart({
                                view: "bar",
                                container: histogram_id,
                                value: "#routes#",
                                color: "#000000",
                                width: 10,
                                xAxis: {
                                    title: "Hour",
                                    template: function (obj) {
                                        // The following hack displays only each hour interval along the xAxis, excluding 00:00
                                        if(obj.interval.substring(3,5)=='00' && obj.interval.substring(0,2)!='00')
                                            return obj.interval.substring(0, 2);
                                        else
                                            return "";
                                    }
                                },
                                yAxis: {
                                    title: "Routes",
                                    template: "{obj}"
                                },
                                tooltip: {
                                    template: "#interval# (#routes#)"
                                }

                            });

Try to use attached libraries. The next chart version will contain the fix for this issue.
libs.zip (67.7 KB)

While the spacing issues appear to be resolved in the attached library the template options for the xAxis is no longer printing above the bar. It appears to be printing in the middle. I have attached a screenshot.

I’ve just uploaded the fixed libs. Please download them again (my previous post).

That appears to have done the trick. Thanks