CODEWITHSUNDEEP
csschartsgoogle-visualization
maverick
maverick

Reputation: 800

Customize Google Charts with CSS

I want to customize the classes in Google Charts.

As far as I'm concerned, there are two options that I've stumbled upon. The first option is:

  1. Just inspect the elements in the browser, to see what the name of the classes is, then just give them new rules in the css file. In some cases I've to set !important; to override the rule. This option seems very "ugly", because forcing the class to have an !important; state is just ugly.
.charts-menu-button,
.charts-menu-button-inner-box {
    width: 200px;
    line-height: 55px;
    border: 0 !important;
    padding: 0 !important;
}
  1. This is my second option which I'm pretty confused over. As I read the Google Chart docs, they suggest to call the "cssClass", like this:
options: {
ui: {
cssClass: {}
  }
}

What I don't understand is when I'm going with the second option, absolute nothing happens to the class I want to customize.

So my question is: What am I doing wrong here, and is there any other way?

Upvotes: 4

Views: 9067

Answers (1)

vinod
vinod

Reputation: 8420

Set the cssclassnames in options for the chart as below. Define the classes in the css file. Below example is for table chart.

chart1.options = {
    //      title: "User Chart",
            displayExactValues: true,
            'showRowNumber': false,
             'allowHtml': true, 
             is3D: true,
        //   'height' : '350px',
             cssClassNames : {
                 headerRow :'tableChartHeaderRow',
                 hoverTableRow : 'tableChartHeaderRowHighlightedState'
             }
         };

Upvotes: 3

Related Questions