Search code examples
vuejs2chart.jschartkick

Vue ChartKick Donut custom cutoutPercentage

I'm starting to learn vue but I can't figure out how to customize a Chart with vue chartkick. What I want to do is to pass default options to change the default style of the charts, let's say I want a different cutoutPercentage, with Charts.js we can set:

Chart.defaults.doughnut.cutoutPercentage = 10;

But this doesn't seem to work with chartkick, I created this Pen to play around but I cannot figured it out, any ideas?

Solution

  • chart kick allows you to pass the library options to the chart, using :library

    <pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]" :donut="true" :library="{cutoutPercentage: 20}"></pie-chart>

    https://codepen.io/BoyWithSilverWings/pen/YadXNO