Charts

Line #

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

<div class="card">
    <div class="card-body"><canvas id="example-chart-js-line"></canvas></div>
</div>

Line Area #

Line charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary.

<div class="card">
    <div class="card-body"><canvas id="example-chart-js-line-area"></canvas></div>
</div>

Vertical Bar #

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

<div class="card">
    <div class="card-body"><canvas id="example-chart-js-vertical-bar"></canvas></div>
</div>

Horizontal Bar #

A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

<div class="card">
    <div class="card-body"><canvas id="example-chart-js-horizontal-bar"></canvas></div>
</div>

Stacked Bar #

Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.

<div class="card">
    <div class="card-body"><canvas id="example-chart-js-stacked-bar"></canvas></div>
</div>

Pie #

Pie chart are probably the most commonly used chart. It is divided into segments, the arc of each segment shows the proportional value of each piece of data.

<div class="card">
    <div class="card-body">
        <canvas id="example-chart-js-pie" class="max-h-20x"></canvas>
    </div>
</div>

Doughnut #

Doughnut is another popular type of pie chart.

<div class="card">
    <div class="card-body">
        <canvas id="example-chart-js-doughnut" class="max-h-20x"></canvas>
    </div>
</div>