Google chart: Add style to axis's title individually -
i have gantt chart created stacked bar chart. trying make h-axis titles different each others, in image below. i've api , not find solution.
does know how accomplish this?
individual styling not supported google api. if can handle risk of future code break can 'manually' change text properties.
as example used simple example google docs , change stacked bar chart.
the following elements created in dom labels on left (2004 - 2007):
<g> <text text-anchor="end" x="147" y="139.9" font-family="arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">2004</text> </g> <g> <text text-anchor="end" x="147" y="216.9" font-family="arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">2005</text> </g> <g> <text text-anchor="end" x="147" y="293.9" font-family="arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">2006</text> </g> <g> <text text-anchor="end" x="147" y="370.9" font-family="arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">2007</text> </g>
you can change them using example:
var labels = document.queryselectorall('text[text-anchor=end]'); (var = 0; < labels.length; i++) { if (labels[i].textcontent == '2004') { labels[i].setattribute('font-weight', 'bold'); labels[i].setattribute('font-size', '20'); } if (labels[i].textcontent == '2005') { labels[i].setattribute('font-style', 'italic'); labels[i].setattribute('font-size', '20'); } }
see whole example @ jsbin.
Comments
Post a Comment