Patterns

2.6.15

Charts

 Anchor  

bar chart

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

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

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

 Anchor  

horizontal bar chart

<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>
 Anchor  

line chart

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

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.