Patterns

2.3.2

Charts

<div class="bg-base-white px-2" data-js="chart-bar"><nyco-chart-bar :chart-data="data" :options="options"></nyco-chart-bar></div>

Bar Chart

All chart source can be found here: src/objects/charts/.

For a full list of customization options check the Chart.js documentation.

<div class="bg-base-white px-2" data-js="chart-horizontal-bar"><nyco-chart-horizontal-bar :chart-data="data" :options="options"></nyco-chart-horizontal-bar></div>

Horizontal Bar Chart

<div class="bg-base-white" data-js="chart-line"><nyco-chart-line :chart-data="data" :options="options"></nyco-chart-line></div>

Line Chart

To achieve a smooth line, set the following properties in the dataset object:

pointBackgroundColor: 'transparent',
pointBackgroundColor: 'transparent',
pointBorderColor: 'transparent',
lineTension: 0,

Additional configuration options are viewable on Chart.js.