I have been trying to implement a Google bar chart using angular-google-chart by referring to the example provided here. However, I am facing an issue where my labels and legends are only partially visible in the image below. How can I display the full text properly?
https://i.sstatic.net/eL3N7.png
Below is the code snippet I have used:
angular.module("google-chart-sample", ["googlechart", "googlechart-docs"])
.controller("GenericChartCtrl", function ($scope) {
$scope.chartObject = {};
$scope.chartObject.type = "BarChart";
$scope.onions = [
{v: "Onions"},
{v: 3},
];
$scope.chartObject.data = {"cols": [
{id: "t", label: "Topping", type: "string"},
{id: "s", label: "Slices", type: "number"}
], "rows": [
{c: [
{v: "Mushrooms"},
{v: 3},
]},
{c: $scope.onions},
{c: [
{v: "Olives"},
{v: 31}
]},
{c: [
{v: "Zucchini"},
{v: 1},
]},
{c: [
{v: "Pepperoni"},
{v: 2},
]}
]};
$scope.chartObject.options = {
'title': 'How Much Pizza I Ate Last Night'
};
});