Vue-chartjs: Rounded corners for Vue.js

Created on 10 Aug 2018 · 6Comments · Source: apertureless/vue-chartjs

Expected Behavior

I want to create rounded corners for my bar chart. but i dont know if this is possible in vue.js, i have seen some javascript options, but the problem is i render the chart on an other way than in js. So i want to ask where to apply the changes and can i make it work in Vue?
html

<line-chart
            class="graph_donut"
            :chart-data="datacollection"
            :options="{
              responsive: true,
              maintainAspectRatio: false,
              cutoutPercentage: 70,
              legend:{display: false}}"
              :styles="{height: '100%', width: '30%', position: 'relative', margin: '20px'}">
</line-chart>

script

fillData3 () {
  Promise.all([this.getStoreScore()]).then(([store]) => {
    this.datacollection3 = {
      labels: ['Man', 'Tirs', 'Ons', 'Tors', 'Fre', 'Lør', 'Søn'],
      datasets: [
        {
          type: 'line',
          yAxisID: 'rightSide',
          fill: false,
          borderColor: '#00C5C7',
          pointBorderWidth: 5,
          label: 'anmeldelser',
          backgroundColor: '#00C5C7',
          data: [
            200,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage
          ]
        },
        {
          type: 'bar',
          label: 'Dårlig',
          backgroundColor: '#FF686E',
          borderWidth: 0,
          data: [store.amount.zero.percentage,
            store.amount.zero.percentage,
            store.amount.zero.percentage,
            store.amount.zero.percentage,
            store.amount.zero.percentage,
            store.amount.zero.percentage,
            store.amount.zero.percentage
          ]
        },
        {
          type: 'bar',
          label: 'Mangelfuld',
          backgroundColor: '#FFDC00',
          borderWidth: 0,
          data: [
            store.amount.one.percentage,
            store.amount.one.percentage,
            store.amount.one.percentage,
            store.amount.one.percentage,
            store.amount.one.percentage,
            store.amount.one.percentage,
            store.amount.one.percentage
          ]
        },
        {
          type: 'bar',
          label: 'Okay',
          backgroundColor: '#95DB6B',
          borderWidth: 0,
          data: [
            store.amount.two.percentage,
            store.amount.two.percentage,
            store.amount.two.percentage,
            store.amount.two.percentage,
            store.amount.two.percentage,
            store.amount.two.percentage,
            store.amount.two.percentage
          ]
        },
        {
          type: 'bar',
          label: 'God',
          backgroundColor: '#58BF5D',
          borderWidth: 0,
          data: [
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage,
            store.amount.three.percentage
          ]
        }
      ]
    }
  })
    }

my code^

the working example
https://codepen.io/jordanwillis/pen/jBoppb

Actual Behavior

How and where should i put the functions/actions?

Environment

vue.js version:
vue-chart.js version:
npm version:

❓ question

Source

ande4559

Most helpful comment

Hey @ande4559

Well, you can make custom modifications and custom charts in vue-chartjs, quite the same way as you would do in Chart.js.

This might help you: https://vue-chartjs.org/#/home?id=custom-new-charts

There are basically 4 steps.

1. Import Chart.js

In your RoundedBarChart.vue you have to import the Chart.js object. Because otherwise you will have no access to the functions provided by it.

import Chart from 'chart.js'

2. Import the `generateChart` helper.

I provided a small helper to generate the chart components. You will use this later.

import { generateChart } from 'vue-chartjs'

3. Make a custom chart.

You can then use the extend() options and controllers provided by chart.js. I guess it will be quite copy and paste from your codepen.

/ 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.RoundedBar = Chart.defaults.Bar;
Chart.controllers.RoundedBar = Chart.controllers.bar.extend({ /* custom magic here */})

4. Generate your chart component

Then you can use the generateChart helper to generate a vue component.

const RoundedBarChart = generateChart('rounded-bar', 'RoundedBar')

5. Use it

Then you can use it in your component like the default charts.

export default {
    extends: RoundedBarChart,
    mounted () {
        this.renderChart(data, options)
    }
}

apertureless on 10 Aug 2018

👍4

All 6 comments

Hey @ande4559

Well, you can make custom modifications and custom charts in vue-chartjs, quite the same way as you would do in Chart.js.

This might help you: https://vue-chartjs.org/#/home?id=custom-new-charts

There are basically 4 steps.

1. Import Chart.js

In your RoundedBarChart.vue you have to import the Chart.js object. Because otherwise you will have no access to the functions provided by it.

import Chart from 'chart.js'

2. Import the `generateChart` helper.

I provided a small helper to generate the chart components. You will use this later.

import { generateChart } from 'vue-chartjs'

3. Make a custom chart.

You can then use the extend() options and controllers provided by chart.js. I guess it will be quite copy and paste from your codepen.

/ 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.RoundedBar = Chart.defaults.Bar;
Chart.controllers.RoundedBar = Chart.controllers.bar.extend({ /* custom magic here */})

4. Generate your chart component

Then you can use the generateChart helper to generate a vue component.

const RoundedBarChart = generateChart('rounded-bar', 'RoundedBar')

5. Use it

Then you can use it in your component like the default charts.

export default {
    extends: RoundedBarChart,
    mounted () {
        this.renderChart(data, options)
    }
}

apertureless on 10 Aug 2018

👍4

Hey thanks for the answer, i have done this.

(images down under)

what is the next step and what do you say i should copy?

https://gyazo.com/77c46c478a706da8c8d1ce2669f18208

[https://i.gyazo.com/thumb/1200/77c46c478a706da8c8d1ce2669f18208-png.jpg]https://gyazo.com/77c46c478a706da8c8d1ce2669f18208

Gyazohttps://gyazo.com/77c46c478a706da8c8d1ce2669f18208
gyazo.com
property=

https://gyazo.com/58516ad22baa85aeb7253ca6be187060

[https://i.gyazo.com/thumb/1200/58516ad22baa85aeb7253ca6be187060-png.jpg]https://gyazo.com/58516ad22baa85aeb7253ca6be187060

Gyazohttps://gyazo.com/58516ad22baa85aeb7253ca6be187060
gyazo.com
property=

https://gyazo.com/1e5f946db11d79b9f4b55ca4661f5bc5

[https://i.gyazo.com/thumb/1200/1e5f946db11d79b9f4b55ca4661f5bc5-png.jpg]https://gyazo.com/1e5f946db11d79b9f4b55ca4661f5bc5

Gyazohttps://gyazo.com/1e5f946db11d79b9f4b55ca4661f5bc5
gyazo.com
property=

https://gyazo.com/366ba72b5926aa416c0628e6d7c80024

[https://i.gyazo.com/thumb/1200/366ba72b5926aa416c0628e6d7c80024-png.jpg]https://gyazo.com/366ba72b5926aa416c0628e6d7c80024

Gyazohttps://gyazo.com/366ba72b5926aa416c0628e6d7c80024
gyazo.com
property=

Fra: Jakub notifications@github.com
Sendt: 10. august 2018 12:30
Til: apertureless/vue-chartjs
Cc: ande4559; Mention
Emne: Re: [apertureless/vue-chartjs] Rounded corners for Vue.js (#401)

Hey @ande4559https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fande4559&data=02%7C01%7C%7C4b7b3ee7c5cf4f6747e308d5febd1d68%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636695010546157953&sdata=RYCIdiX%2BvguqwLcVam6Loo17y8jko9UyPT2Us2zk7ys%3D&reserved=0

Well, you can make custom modifications and custom charts in vue-chartjs, quite the same way as you would do in Chart.js.

This might help you: https://vue-chartjs.org/#/home?id=custom-new-chartshttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fvue-chartjs.org%2F%23%2Fhome%3Fid%3Dcustom-new-charts&data=02%7C01%7C%7C4b7b3ee7c5cf4f6747e308d5febd1d68%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636695010546157953&sdata=TEViC2ufCYcdx5JVxYCxe0nWzXUpbUm5D%2F8LYsFCrLM%3D&reserved=0

There are basically 4 steps.

Import Chart.js

In your RoundedBarChart.vue you have to import the Chart.js object. Because otherwise you will have no access to the functions provided by it.

import Chart from 'chart.js'

Import the generateChart helper.

I provided a small helper to generate the chart components. You will use this later.

import { generateChart } from 'vue-chartjs'

Make a custom chart.

You can then use the extend() options and controllers provided by chart.js. I guess it will be quite copy and paste from your codepen.

/ 3. Extend on of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
Chart.defaults.RoundedBar = Chart.defaults.Bar;
Chart.controllers.RoundedBar = Chart.controllers.bar.extend({ /* custom magic here */})

Generate your chart component

Then you can use the generateChart helper to generate a vue component.

const RoundedBarChart = generateChart('rounded-bar', 'RoundedBar')

Use it

Then you can use it in your component like the default charts.

export default {
extends: RoundedBarChart,
mounted () {
this.renderChart(data, options)
}
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fapertureless%2Fvue-chartjs%2Fissues%2F401%23issuecomment-412068066&data=02%7C01%7C%7C4b7b3ee7c5cf4f6747e308d5febd1d68%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636695010546314193&sdata=LnIgimkGADI%2B9sLEP8EY8blBja50QAC4jSvMZh97Jg4%3D&reserved=0, or mute the threadhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAeJp3XFpsZIer8PwKHVLPyz8mK0jH5TIks5uPXz3gaJpZM4V37jF&data=02%7C01%7C%7C4b7b3ee7c5cf4f6747e308d5febd1d68%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636695010546314193&sdata=JLCl4w4JuIDW%2B6isroArhHpsDVsi%2B%2BTnlYYhGvgOQiQ%3D&reserved=0.

ande4559 on 13 Aug 2018

Well, ... just the code related to the rounded borders from your codepen.

Chart.helpers.drawRoundedTopRectangle = ...
Chart.elements.RoundedTopRectangle ...
Chart.defaults.roundedBar...
Chart.controllers.roundedBar...

If you have further questions StackOverflow may be the right choice.
As this is not really vue-chartjs related.

apertureless on 13 Aug 2018

Hello i have still not made i work.

if i create my diagram.js with

mport Chart from 'chart.js'
import { generateChart } from 'vue-chartjs'

Chart.defaults.RoundedBar = Chart.defaults.Bar
Chart.controllers.RoundedBar = Chart.controllers.bar.extend({
draw () {
my rounded corners things goes here
}
})

const RoundedBarChart = generateChart('rounded-bar', 'RoundedBar')

export default {
extends: RoundedBarChart,
mounted () {
this.renderChart(this.data, this.options)
}
}

and then import this in my vue component like this

import Diagram from './js/diagram.js'

export default {
name: 'dashboard',
components: {
Diagram
}
data () {
return {
selected: 1,
datacollection: null,
}
},
async mounted () {
await this.fillData()
}

fillData () {
Promise.all([this.getStoreScore()]).then(([store]) => {
this.datacollection = {
labels: ['Dårlig', 'Mangelfuld', 'Okay', 'God'],
datasets: [
{
curvature: 1,
label: ['Dårlig', 'Mangelfuld', 'Okay', 'God'],
backgroundColor: ['#FF686E', '#FFDC00', '#95DB6B', '#58BF5D'],
borderWidth: 2,
data: [20, 30, 20, 30]
}
}

nothings happends or else it tells me some of my drawings dont exist.

best regards
Anders

Fra: Jakub notifications@github.com
Sendt: 10. august 2018 12:30
Til: apertureless/vue-chartjs
Cc: ande4559; Mention
Emne: Re: [apertureless/vue-chartjs] Rounded corners for Vue.js (#401)

Well, you can make custom modifications and custom charts in vue-chartjs, quite the same way as you would do in Chart.js.

There are basically 4 steps.

Import Chart.js

In your RoundedBarChart.vue you have to import the Chart.js object. Because otherwise you will have no access to the functions provided by it.

import Chart from 'chart.js'

Import the generateChart helper.

I provided a small helper to generate the chart components. You will use this later.

import { generateChart } from 'vue-chartjs'

Make a custom chart.

You can then use the extend() options and controllers provided by chart.js. I guess it will be quite copy and paste from your codepen.

Generate your chart component

Then you can use the generateChart helper to generate a vue component.

const RoundedBarChart = generateChart('rounded-bar', 'RoundedBar')

Use it

Then you can use it in your component like the default charts.

export default {
extends: RoundedBarChart,
mounted () {
this.renderChart(data, options)
}
}

ande4559 on 20 Aug 2018

Like I said, you should go to stackoverflow for this kind of questions. As it is not vue-chartjs related.

apertureless on 21 Aug 2018

This is vue charts? I cant extend like vue-charts docs says

Sendt fra min iPhone

Den 21. aug. 2018 kl. 09.22 skrev Jakub <[email protected]notifications@github.com>:

Like I said, you should go to stackoverflow for this kind of questions. As it is not vue-chartjs related.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fapertureless%2Fvue-chartjs%2Fissues%2F401%23issuecomment-414575750&data=02%7C01%7C%7C6f8b303e91634a84876908d60736c4da%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636704329139033721&sdata=tFZadJeM410Ja9xlRX7E0qEMkh05rqVNzaSg%2BS1Zkig%3D&reserved=0, or mute the threadhttps://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAeJp3QSzPHcmqoknHakTa2tiZMyCArIHks5uS7UMgaJpZM4V37jF&data=02%7C01%7C%7C6f8b303e91634a84876908d60736c4da%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636704329139033721&sdata=iHHWQtI2ESvkxFlPUUoj1%2FemV4LPXKpk6O7Z6i23%2F6I%3D&reserved=0.

ande4559 on 21 Aug 2018

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Content Security Policy

syxolk · 5Comments

Passing chart size (width / height) as prop doesnt resize the chart

jcalonso · 4Comments

Regression in 2.8.3

Tirke · 4Comments

onClick event in Pie chart

DavidSotoA · 3Comments

Stacked bar chart?

Scalpel78 · 4Comments

Vue-chartjs: Rounded corners for Vue.js

Expected Behavior

Actual Behavior

Environment

Most helpful comment

1. Import Chart.js

2. Import the generateChart helper.

3. Make a custom chart.

4. Generate your chart component

5. Use it

All 6 comments

1. Import Chart.js

2. Import the generateChart helper.

3. Make a custom chart.

4. Generate your chart component

5. Use it

Related issues

2. Import the `generateChart` helper.

2. Import the `generateChart` helper.