Charts

Charts depict large sets of data in graphical forms to make data easier to visualize and comprehend. In Material Admin Pro, data visualization has been implemented by means of the Chart.js plugin, an open source, JavaScript charting library.

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.

Line 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.

Example Line Chart

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.

Example Smooth Line Chart

Area Charts

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.

Example Area Chart

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.

Example Smooth Area Chart

Bar Chart

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.

Example Bar Chart

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.

Example Grouped Bar Chart

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.

Example Horizontal Bar Chart

Grouped Horizontal Bar Chart

Multiple data sets are also supported with horizontal bar charts.

Example Horizontal Bar Chart

Pie Chart

Pie charts express portions of a whole, using arcs or angles within a circle.

Example Pie Chart

Doughnut Chart

A variation on the pie chart, a doughnut chart is a pie chart with the center cut out.

Example Doughnut Chart

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.