How can we add custom css for Gchart?

Question

I need to add custom css in my Gchart. I am able to bring the index labels in the same line.Also i want to give custom font to the index labels. On inspection of page all the index were inside g tag and i added css for g tag but it is not working.Also i need to modify tooltip style and remove '%' from each slices of chart. How can i achieve this?

My code :

<style>
.myPanel.ui-panel{
    width:55% !important;
}
g{
font-family: Verdana !important;
display: block !important;
}
</style>
<div id="savChart">
  <pe:gChart value="#{dashboardMB.dynamicChartObj}" width="500" height="400"
  title="Quanity Wise">
  </pe:gChart>
</div>

Try to give `display: block;` (add `!important` if needed) to the table, the container of these labels (don't know which chart are you using, so I can't give the exact class to use, maybe `.jqplot-table-legend`) — WoAiNii, Apr 27 '20 at 11:06
Can you post some code at last? You could be using a theme, or some custom css, to override. — WoAiNii, Apr 27 '20 at 11:11
@WoAiNii: Better to really apply [css specificity](https://stackoverflow.com/questions/2809024/how-are-the-points-in-css-specificity-calculated) instead of using `!important` — Kukeltje, Apr 28 '20 at 11:23

Melloware · Answer 1 · 2020-04-28T22:03:25.933

1

For GGcharts see this doc on how to customize your colors: https://developers.google.com/chart/interactive/docs/customizing_charts

Then in your GChartModelBuilder do something like this..

 new GChartModelBuilder()
    .setChartType(getChartType())
    .addOption("fontName", "Roboto")
    .addOption("colors", Arrays.asList("#e0440e", "#e6693e"))
    .addColumns(new DefaultGChartModelColumn("Topping", "string"),
                new DefaultGChartModelColumn("Slices", "number"))
    .addRow("Mushrooms", mushrooms).addRow("Onions", onions).build();

edited Apr 28 '20 at 22:03

answered Apr 27 '20 at 11:20

Melloware

10,435
2
32
62

See https://stackoverflow.com/questions/2455020/font-family-selection-with-google-charts – Melloware Apr 27 '20 at 22:43
@ManiRatna: This IS in the GChartModelBuilder... Did you check the additional links? CSS classes ARE added there. And by referencing a class(name) you can do anything in css...So this is the answer to your question. And regarding the %, new questrions in new questions please! – Kukeltje Apr 28 '20 at 10:21
@Melloware: Maybe add a `.addOption('className', ...)` in the example too? Assuming that works – Kukeltje Apr 28 '20 at 10:27
The `options` get serialized as JSON to the Google Chart API so I would think anything you see in Google Documentation for options can simply be added to the GChart Options. – Melloware Apr 28 '20 at 10:42
Map sliceStyle = new HashMap(); String colorRanges = "{ color: '#d81ad3',fontName: 'Arial',fontSize: 30, bold: true, italic: true }"; sliceStyle.put("pieSliceTextStyle", colorRanges); chartBuilder.addOption("sliceStyle", sliceStyle); i tried like this but its not working – Mani Ratna Apr 28 '20 at 14:52
Just add `.addOption("fontName", "Roboto")` to change the font. – Melloware Apr 28 '20 at 22:04

How can we add custom css for Gchart?

1 Answers1