Using the Vega Lite editor in Chart Builder

As an example, I've created a project based on a dataset from the US Department of Energy regarding types of energy production throughout the US.

You will then see the same chart as below:

That's a good start, but it's a bit bland and would be difficult to read if projected onto a screen across a conference room. Let's get to work!

By default, a Chart Builder adds the title automatically, but does not provide any graphical way to style it. Click on the Vega Lite editor on the top left and you'll see the following entry near the top:

"title": "Rooftop photovoltaic energy production by US state (top 10)"

To transform the title into a field that we can customize, make it into a JSON object by adding curly braces and adding the text property:

"title": {"text": "Rooftop photovoltaic energy production by US state (top 10)" }

The title will look the same as before, but we've laid the foundation for further styling by turning it into a JSON object.

"title": {
   "text": "Rooftop photovoltaic energy production by US state (top 10)",
   "anchor": "start"
 }

"title": {
   "text": "Rooftop photovoltaic energy production by US state (top 10)",
   "anchor": "start",
   "font": "Lato",   "fontSize": 24,   "color": "#355D8A"
 }

"title": {
   "text": "Rooftop photovoltaic energy production by US state (top 10)",
   "anchor": "start",
   "font": "Lato",
   "fontSize": 24,
   "color": "#355D8A",
   "offset": 40
 }

To modify the axis labels (in this case, the names on the x-axis andnumbers on on the y-axis), we'll add some additional attributes within the configobject already present in our Vega Lite editor. By default, the config object will look like:

"config": {
   "background": "#ffffff",
   "padding": 20,
}

Within that configobject, add a new object called axis to modify the labels on both the X and Y axes at the same time. That object will accept a number of attributes; we'll use the following:

Our config object now looks like this:

"config": {
   "background": "#ffffff",
   "padding": 20,
   "axis": {     "labelFontSize": 20,     "labelFont": "Lato",     "labelColor": "#6290C3"   }
 }

We modified labels for both axes above, but we can also style axes singly as well. The state names under the X axis are difficult to read with their current orientation, so change that by adding an axisX object within the config object.

Use the labelAngle attribute to control the angle of those labels, providing the number of degrees to rotate them.

"config": {
   "background": "#ffffff",
   "padding": 20,
   "axis": {
     "labelFontSize": 20,
     "labelFont": "Lato",
     "labelColor": "#6290C3",
     "titleFontSize": 24,
     "titleColor": "#333D49",
     "titleFont": "Lato"
   },
   "axisX": {     "labelAngle": 40   }
 }

Our labels are much more readable now, but we need to update those state and gwh axis titles as well. For those, specify the following attributes within the config>axis object:

"config": {
 "background": "#ffffff",
 "padding": 20,
 "axis": {
   "labelFontSize": 20,
   "labelFont": "Lato",
   "labelColor": "#6290C3",
   "titleFontSize": 24,   "titleColor": "#333D49",   "titleFont": "Lato"
   }
}

Finally, let's edit the title text for each axis (e.g. state and gwh). This will use the column name from our query results by default. In our case, those titles aren't so bad, but in many cases they'll be difficult to read and full of underscores and abbreviations.

Navigate to the encoding object within the Vega Lite editor. It will have a number of nested objects below it already. Find the nested object encoding>x. Add and attribute called title and provide the desired name to that attribute - in this case, give it the value "State Name".

Also add a title attribute under encoding>y and provide the value "Gigawatt hours (GWh)".

Here's our new encoding object:

"encoding": {
 "x": {
   "field": "state",
   "title": "State Name",
   "type": "nominal",
   "sort": {
     "field": "gwh",
     "op": "sum",
     "order": "descending"
      },
   "scale": {
   "type": "linear",
   "zero": true
   }
 },
 "y": {
   "field": "gwh",
   "title": "Gigawatt hours (GWh)",
   "type": "quantitative",
   "scale": {
     "type": "linear",
     "zero": true
     }
   }
 }

And our final chart:

This tutorial provided some basic styling functionality by accessing the Vega Lite editor in Chart Builder directly, but it can do so much more. Check out the official Vega Lite examples, tutorials, and full documentation for an in depth look.