Manual Configuration

Create dual Y-axis

Supported charts: Area, Bar, Column, Combo, Line
  • The below code will convert the first and second series into Y axis.
{
"vAxes": {
          "0": {"title": "Temps (Celsius)"},
          "1": {"title": "Daylight"}
        },
"series": {
          "0": {"targetAxisIndex": "0"},
          "1": {"targetAxisIndex": "1"}
        }
}
  • The below code will convert the first and second series into Y axis and customize the ticks on each axis.
{
"vAxes": {
          "0": {"title": "Temps (Celsius)", "ticks": [1500000, 2000000]},
          "1": {"title": "Daylight","ticks": [15000, 2000]}
        },
"series": {
          "0": {"targetAxisIndex": "0"},
          "1": {"targetAxisIndex": "1"}
        }
}

Customize Axis

Supported charts: All, except Pie, Gauge and Table.
  • The below code will change the angle of the text to 90 degrees. Make it 0 if the text needs to be horizontal.
{
"hAxis": {
         "slantedTextAngle": 90
        }
}
  • The below code will change the ticks of the X axis.
{
"hAxis": {
         "ticks": [10,20,30,90]
        }
}
  • The below code will change the maximum and minimum value of of the Y axis without changing the data.
{
"vAxis": {
	"maxValue": 20,
	"minValue":-1
	}
}

Customize Pie Charts

Supported charts: Pie
  • The below code will change how the "Other" slice works. In the default pie chart that the plugin creates, we will combine all slices that have a value of 16% and below into one slice.
{
	"sliceVisibilityThreshold": 0.16
}
  • Change size of the pie hole in a donut chart and the text color so that the values are visible.
{
	"pieHole": 0.9,
	"pieSliceTextStyle":{
		"color":"red"
	}
}

Customize Gauge Charts

Supported charts: Gauge
  • Change major ticks in the gauges. Provide as many strings as the number of ticks required.
{
	"majorTicks": ["tick one","tick two","tick three"]
}

Customize Text/Font

Supported charts: All except Gauge and Table.
  • Change font family and font size for all text.
{
	"fontName": "Verdana",
	"fontSize": 10
}

Customize Tooltip

Supported charts: All except Gauge and Table.
  • Enable HTML tooltips so that you can style them.

Add this code to the Manual Configuration

{
	"tooltip": {
		"isHtml":"true"
	}
 }

Add this code to the theme CSS file.

div.google-visualization-tooltip {
	/* style the tooltip here */
}

Customize Stacked Charts

Supported charts: Bar, Column.
  • 100% stacked.

Add this code to the Manual Configuration

{
	"isStacked": "percent"
 }
  • 100% stacked, fractional.

Add this code to the Manual Configuration

{
	"isStacked": "relative"
 }