name of what each bar represents ,and the amount above the bar

[Alex]

Hi I'm helping on a project and the initial plan was to make use of google charts for the content of come components (we're changing it to react). I'm just tarting out with google charts and the problem is that i've gone through the google charts documentation, searched online and on stackoverflow but i can't seem to figure out if it's even possible to do what was planned ...

the design is to display bar chart (horizontally) in a container/card beneath the title of the card, no x axis, no y axis, just the bars and instead of having the data on the axis y axis display what each bar represents and how much each bar represents (the blue and red bars in the grey total in the jsfiddle), this should be displayed on the chart(inside), above each bar ... I thought it could be done using annotations, and maybe find a way to make the annotation line invisible or give it the same color as the chart background but i've only seen examples where single annotations are displayed at the very end of the bar

example of how we want the bar graph to look: https://jsfiddle.net/dvmp3js6/  ... can this be done with google charts ?

[Daniel LaLiberte]

Hi Alex,

There is no direct way to implement this type of chart.  We have 'line' annotations that could probably be used, but they wouldn't help simplify this much.  The easiest way might be just to draw a series of small charts, and display your lines of text with HTML, like this:  https://jsfiddle.net/dlaliberte/dfw9k2sm/1/

You could generate this series of charts with a loop over data if you are getting the data from a spreadsheet, for example.

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/7a16d822-ef26-4644-a938-98e7f406a98d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA