bar chart separator line on axis horizontally

58 views
Skip to first unread message

Simon

unread,
Jan 19, 2018, 7:21:12 AM1/19/18
to Google Visualization API
Hello there,

Is there a way to add horizontal separator lines in-between each bar chart? I could not find anything about this in the documentation. Is it still possible, if so I would appreciate to be redirected to an example or some documentation. :)

Thank you,

Simon  

Sean Larson

unread,
Jan 19, 2018, 12:34:04 PM1/19/18
to Google Visualization API
In between each bar, in a single chart? or in-between individual instances of a bar chart? I think you can look at options  for "minor gridlines" and "major gridlines" and both hAxis and vAxis. 

If none of those options achieve what you want after some trial-error, there is the overlay technique which is also in documentation.

Daniel LaLiberte

unread,
Jan 19, 2018, 1:07:52 PM1/19/18
to Google Visualization API
Discrete axes for string values don't display gridlines, so if you want gridlines, you will have to use numeric values instead.  You can still display the string representation of the numeric values, both on the axis and in tooltips, if you provide explicit ticks (see the 'ticks' option) with the formatted representation and include the formatted representation in the datatable.   That is, instead of a value being a string x, use an object of the form { v: num, f: 'foo' } where num is a number like 1 to n.  Hope that provides enough hints to go on.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c2b1d1ab-97b6-4aff-9052-470f0a269254%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Simon

unread,
Jan 22, 2018, 11:01:44 AM1/22/18
to Google Visualization API
Thanks for the insights! I several bars that I want to separate by label groups with gridlines. This seems to be quite tricky to do. What would be the best to use? Gridline or Overlay?


On Friday, January 19, 2018 at 6:07:52 PM UTC, Daniel LaLiberte wrote:
Discrete axes for string values don't display gridlines, so if you want gridlines, you will have to use numeric values instead.  You can still display the string representation of the numeric values, both on the axis and in tooltips, if you provide explicit ticks (see the 'ticks' option) with the formatted representation and include the formatted representation in the datatable.   That is, instead of a value being a string x, use an object of the form { v: num, f: 'foo' } where num is a number like 1 to n.  Hope that provides enough hints to go on.
On Fri, Jan 19, 2018 at 12:34 PM, Sean Larson <industr...@gmail.com> wrote:
In between each bar, in a single chart? or in-between individual instances of a bar chart? I think you can look at options  for "minor gridlines" and "major gridlines" and both hAxis and vAxis. 

If none of those options achieve what you want after some trial-error, there is the overlay technique which is also in documentation.

On Friday, January 19, 2018 at 6:21:12 AM UTC-6, Simon wrote:
Hello there,

Is there a way to add horizontal separator lines in-between each bar chart? I could not find anything about this in the documentation. Is it still possible, if so I would appreciate to be redirected to an example or some documentation. :)

Thank you,

Simon  

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.



--

Sean Larson

unread,
Jan 22, 2018, 9:46:07 PM1/22/18
to Google Visualization API
There are other ways to show transition between bars, for example you may want to use color or shades of a color to show the separation. If you must have a line: my suggestion is to try overlay first. I think you could use the getChartLayoutInterface, and some of it's methods to locate the right-hand or left-hand boundary of your bars, and then draw an overlay at that location. 

Although I think overlay is best used when the number of rows is constant, as you must already have a container to store the overlay in. If your data is dynamic, you will need to dynamically provision a Div element, I think.
Reply all
Reply to author
Forward
0 new messages