Chart Snippet

This snippet is used to embed charts on your page from a data source such as Google Sheets. You can select from various chart types and include a chart title and axis titles.

chartChart snippet

  1. Enter the chart title in the Title field if desired. This will display above the chart in bold font.
  2. Enter the name of the type of chart you want to display in the Type field. Enter area, bar, column, line, pie, or stepped.
  3. Enter the title for the horizontal (x) axis in the Horizontal Axis Title field if desired.
  4. Enter the title for the vertical (y) axis in the Vertical Axis Title field if desired.
  5. Legend Position will determine where the legend will display in relation to the chart. Leave it as bottom or change it to right or none.
  6. In the Data Source URL field enter the URL for the data source.
    1. If you are using a Google Sheet, make sure that the share settings are changed so that anyone with the link can view it.
    2. Change the URL to be like

      1. where yoursheet is the ID for your spreadsheet, normally after /d/and before /edit?ts= in the URL of the live sheet (it’s usually a long string of random letters and numbers)
      2. and yourgid is the gid for the tab within the sheet as found in the URL of the live sheet.
      3. The /a/ part of the URL should only be used if it is in the live URL of your sheet.
  7. Leave Width at 100% unless there is a specific reason to not use the full space.
  8. Height (in pixels) can be adjusted if needed.
  9. Features and Options fields are not used at this time.

View charts in the Style Guide.