Material Design Data Visualizations

Figma Resource

Based on Material Design Data Visualization Principles¹ and Google Charts Guidelines².


Featured Visualizations:

  • Area Chart
  • Bar Chart
  • Bubble Chart
  • Candlestick Chart
  • Donut Chart
  • Geo Chart
  • Histogram
  • Icon Chart
  • Line Chart
  • Pie Chart
  • Scatterplot
  • Scorecard
  • Timeline

Additionally, a separate section details progressive disclosure guidelines involving hover and tap interactions on desktop and mobile.

All charts are available in light and dark themes and are compatible with the Lights³ plugin which allows for seamless switching between themes with one click.


External Links


  1. Material Design Data Visualization Principles

  2. Google Charts Guidelines

  3. Lights

Changelog


03.14.2022

  • Published community file.
  • Added empty state illustration to blank page.


03.16.2022

  • Fixed combo scorecard sizing discrepancies in cover image.
  • Tweaked L value of

    Light/Base/Green

    color style to improve contrast and visibility.


03.18.2022

  • Fixed broken link to Google Charts Guidelines.


07.09.2022

  • Fixed Material Design Data Visualizations link in

    About

    page.
  • Fixed labeling error in description for Candlestick Charts.


07.23.2022

  • Removed conflicting styles from external and missing libraries.
  • Added

    Tooltip Metric

    text style.


09.14.2022

  • Pushed miscellaneous minor fixes.


05.02.2023

  • Updated with miscellaneous minor bug fixes.