Google Table Chart Styling

Question

It seems like the styling on google table chart not working very well. Even on their own examples on the webpage https://developers.google.com/chart/interactive/docs/examples ( Customized Table Example ) does not work? Like the golden border? I can´t see any?

I want to style my own google table chart and remove the border around the cells? Anyone how can get that to work I would be so happy. My code look like this.

CSS:

  .remove-cell-border{
        border: none;
    }

chartService.js

var drawTableChart = function (data, type) {

    var cssClassNames = {
        'headerRow': "header-grey-font",
        'tableRow': "remove-cell-border",
        'headerCell': "remove-cell-border",
        'tableCell': "remove-cell-border",
    };

    var chartObject = {
        "type": type,
        "display": false,
        "data": data,
        "options": { 
            "allowHtml": true,
            "isStacked": "true",
            "fill": 20,
            "displayExactValues": false,
            "cssClassNames": cssClassNames
            },
        "formatters": {}
    };
    return chartObject;
};

return {
    drawTableChart: drawTableChart
};

Answer 1

The thing was that some other CSS was overriding my border-style. So now it is working when I changed my CSS to !important .

.remove-cell-border{
    border: none !important;
}