Display error for hAxis.gridline and chartArea.backgroundColor.{stroke: 'black' strokeWidth: 10}
17 views
Skip to first unread message
Martin Underwood
Apr 15, 2017, 8:21:33 AM4/15/17
to Google Visualization API
If you draw a chart and set
chartArea: {backgroundColor: {stroke: 'black', strokeWidth: 10, fill: '#F0F0F0'}}}
to draw a border around it, and then draw a graph where the hAxis doesn't start at 0 (eg between two dates), the hAxis.gridline seems to be drawn after and therefore on top of the chartArea border.
This looks a bit messy. I first noticed it when the gridline was the default mid-grey and the border was 1 pixel wide: the border was then black at the top, right and bottom, but was grey on the left. In the example that I've attached, I've made the border 10 pixels wide and set the gridlines to red to show the problem more effectively.
I wonder whether a solution would be to change the way the graph is draw in one of two ways:
- draw the border after and on top of the axes and the data lines
- draw gridlines only where they lie between the left and right borders of the graph, and not if they coincide with the borders
By the way, is there a way of reducing the large amount of horizontal white space between the left and right vAxis titles and the numbers (eg 0, 10, 20) on those axes? I presume it's large to accommodate the possibility of the axis numbers being many digits in length
chartArea: {backgroundColor: {stroke: 'black', strokeWidth: 10, fill: '#F0F0F0'}}}
to draw a border around it, and then draw a graph where the hAxis doesn't start at 0 (eg between two dates), the hAxis.gridline seems to be drawn after and therefore on top of the chartArea border.
This looks a bit messy. I first noticed it when the gridline was the default mid-grey and the border was 1 pixel wide: the border was then black at the top, right and bottom, but was grey on the left. In the example that I've attached, I've made the border 10 pixels wide and set the gridlines to red to show the problem more effectively.
I wonder whether a solution would be to change the way the graph is draw in one of two ways:
- draw the border after and on top of the axes and the data lines
- draw gridlines only where they lie between the left and right borders of the graph, and not if they coincide with the borders
By the way, is there a way of reducing the large amount of horizontal white space between the left and right vAxis titles and the numbers (eg 0, 10, 20) on those axes? I presume it's large to accommodate the possibility of the axis numbers being many digits in length
Daniel LaLiberte
Apr 15, 2017, 1:39:28 PM4/15/17
to Google Visualization API
Hi Martin
SVG likes to draw lines centered around the points, and this includes borders of rectangles, which is what the chartArea border is. I don't think we do anything special with this 'stroke' to offset it as one might expect, either to be all inside the chartArea or, probably better, all outside. It wouldn't be enough to change the order of drawing layers, or even to change the clipPath to be inside the border, because charts will end up drawing in this edge area as well, unaware of the border width.
The only way to affect the size of the area outside the chartArea is by setting the chartArea top, left, right, bottom, height, and width options, as well as the top-level height and width options.
--
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/9e24914b-3e04-4d4a-957b-e7854e740237%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages