# Charts

coreui-vue-chartjs

Library, which makes using chart.js in vue easy.

# Features

  • Implementation with ease - You only need to pass 'datasets' prop and you have your chart working. Optionally you can pass labels, options and plugins according to chart.js docs. The rest of chart.js configuration issues are already resolved,
  • Chart will be rendered, even if you don't pass the labels, as empty labels will be generated automatically. You can also assign months or numeric indexes to labels (see prop description),
  • If you don't pass tooltip options, there would be coreui-custom-tooltips by default. They are resolving the chart.js issue with tooltip beeing cut, when exceeding the canvas.
  • Dynamic updates of passed configuration. This feature makes your chart.js configuration automatically reactive to changes.

# Importing components

You can import vue plugin with all chart components, or single component. We suggest getting the plugin because the size of the plugin is nearly identical to a single component. It is due to the fact that components share the same functionality, they only have diffrent chart type.

Import example:

Each chart.js chart type is implemented by correlating component:

  • CChartBar
  • CChartLine
  • CChartHorizontalBar
  • CChartDoughnut
  • CChartRadar
  • CChartPie
  • CChartPolarArea

# Usage

If want your chart to take specific height instead of being responsive, just add height by css. Remember to turn off maintainAspectRatio option in this case.

Examples

# Chart components Api