CODEWITHSUNDEEP
google-visualization
did1k
did1k

Reputation: 165

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

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/.

Upvotes: 1

Views: 1184

Answers (1)

did1k
did1k

Reputation: 165

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

Upvotes: 2

Related Questions