How to shift the position of horizontal Axis ticks so that it will not intersect with border line of Chart Area in Google Chart?

1
votes

By default, Google Chart positioned horizontal axis ticks on the border line of Chart Area, which can be shown in this picture:

horizontal axis ticks is intersecting with border line of Chart Area

How can I set some kind of padding to chart area that will make it look like this:

need some kind padding for inside chart area

I am using Google Charts https://google-developers.appspot.com/chart/.

1
google-visualization
You could try adding a point on the day before and the day after with value null. Or maybe make a series with transparency that covers those 2 days. If not, you could set the ticks manually but its kind of hard with dates - juvian
@juvian I tried your suggestion by adding null ticks 1 day before and after the range. And it doesn't show the null ticks. Here is the code: pastebin.com/gcbdpT71 - did1k

1 Answers

1
votes

I finally found the answer:

Since I am using Date Data Type format, the chart will act as Continuous Chart (https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Data_Format).

Continuous Chart has characteristics of having tick close to the edge of the chart. What I have to do is set the domainAxis.type option to 'category'. https://google-developers.appspot.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous

Here is the code of my chart using ChartKick (http://ankane.github.io/chartkick/):

<%= line_chart @daily_pageviews, library: { domainAxis: { type: "category" }, curveType: "none", height: "400px", colors: ["#ff9933"], chartArea: { backgroundColor: { stroke: "#ccc", strokeWidth: 1 } } } %>

Result:

Chart