The third party plugin has been restyled and customized to fit Material Design's specifications for data visualization. Below are some examples of common use cases for representing data through charts.
Use line charts to display minor variations in data. In this example, tooltips have been enabled along with axis labels.
Default Line Chart
By default, the line chart has no rounding at data points in order to show precise fluctuations in the data set. The axis lables and tooltips are styled according to Material Design specifications.
Smooth Line Chart
Modifying the line tension of a line chart can add a new stylistic element to the data presentation. Smoothed line charts are best suited for data sets that represent gradual changes over time where displaying sudden changes is not crucial.
Use area charts to summarize relationships between data sets or how individual data points relate to a whole.
Default Area Chart
By default, the area chart is similar to the line chart except that it has a fill color underneath the line.
Smooth Area Chart
Smooth area charts are also best used for displaying data with gradual changes where visualizing sudden, precise changes in data is not necessary.
Use bar charts to express larger variations in data, how individual data points relate to a whole, comparisons between data, and ranking.
Horizontal Bar Chart
The default bar chart is a single color and shows axis labels and tooltips when an individual bar is hovered over or interacted with.
Grouped Bar Chart
A grouped bar chart shows multiple data sets along the same axis, perfect for comparing two different sets of data.
The below example shows two data sets, however more can be used.
Horizontal Bar Chart
The horizontal bar chart is a variation on the vertical bar chart. This chart type is helpful for showing trend data and comparisons.
Grouped Horizontal Bar Chart
Multiple data sets are also supported with horizontal bar charts.
Pie charts express portions of a whole, using arcs or angles within a circle.
A variation on the pie chart, a doughnut chart is a pie chart with the center cut out.
For a full list of available charts, configuration options, and usage instructions for Chart.js, use the link below to view the official plugin documentation.