We Keep Coding

Vue - script-setup data to script for charts

First let me clarify, i'm new to vue.
What I am trying to do is, when I get data from the defineProps. I want that the data from the defineProps goes to my script. Only I cant get the data over there. It is only available in the <template> {{ graph }} </template>. Notice that i can access the data with {{ graph }} in there. I just cant find a way to use it in export default { }
So my script is looking like this
<script setup>
const props = defineProps(['graph']);
</script>
<template>
{{ graph }} // Works
</template>
<script>
console.log(props); // Doesnt work or
console.log(graph); // Doesnt work
export default {
}
</script>
So, how do I get the data from props(graph) into export default { }?
Why do I want do this?
I saw https://vue-chartjs.org/examples/ and I followed it.
export default {
name: 'BarChart',
components: { Bar },
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [3, 20, 12] } ]
},
chartOptions: {
responsive: true
}
}
}
}
Notice the data: [3, 20, 12]. I want to edit the values with the data I get. For example data: [props.day1, props.day2, props.day3]

Like commented, use just script setup, try like following:
<template>
<Bar :data="chartData" :options="chartOptions" />
</template>
<script setup>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import { ref } from 'vue'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
const chartData = ref({
labels: [ 'January', 'February', 'March'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12]
}
]
})
const chartOptions = ref({
responsive: true,
maintainAspectRatio: false
})
</script>
demo HERE

Cannot read property 'length' of undefined for ChartJS when I use it inside React

I have built a custom component for Radar Chart:
class RadarChart extends Component {
constructor(props) {
super(props);
this.canvasRef = React.createRef;
}
componentDidMount () {
console.log('props: ', this.props)
this.myRadarChart = new Chart(this.canvasRef.current, {
type: 'radar',
data: {
labels: this.props.labels,
datasets: [
{
label: "My Second dataset",
backgroundColor: "rgba(26,179,148,0.2)",
borderColor: "rgba(26,179,148,1)",
pointBackgroundColor: "rgba(26,179,148,1)",
pointBorderColor: "rgba(26,179,148,1)",
data: this.props.data
}
]
},
options: {
responsive: true,
legend: {
display: false
}
}
})
}
render() {
return <canvas ref={this.chartRef} />
}
}
I reference the above component and into my other component and pass as props both the data and labels like this.
class Name1 extends Component {
state = {
data: [28, 48, 40, 19],
labels: ["In Person Call", "RTE", "MobilePush", "Speaker Program"],
};
render() {
return (
<div>
<RadarChart
data={this.state.data}
labels={this.state.labels}
/>
</div>
)
}
But I get this error: TypeError: Cannot read property 'length' of undefined.
I checked in the console and I'm able to pass on the data and labels to the other component but for some reason I see that error. Any suggestions?

Modified my code to this and got the chart displayed. I don't know what the issue was but it could be that I hadn't added getContext. I also created the ref outside my state.
class RadarChart extends Component {
constructor(props) {
super(props);
}
chartRef = React.createRef();
componentDidMount () {
const myChartRef = this.chartRef.current.getContext("2d");
new Chart(myChartRef, {
type: 'radar',
data: {
labels: this.props.labels,
datasets: [
{
label: "My Second dataset",
backgroundColor: "rgba(26,179,148,0.2)",
borderColor: "rgba(26,179,148,1)",
pointBackgroundColor: "rgba(26,179,148,1)",
pointBorderColor: "rgba(26,179,148,1)",
data: this.props.data
}
]
},
options: {
responsive: true,
legend: {
display: false
}
}
})
}
render() {
return <canvas ref={this.chartRef} />
}
}

how to Show value in pie chart Legend in react-chartjs-2

I'm using react-Chartjs-2 pie chart for my dashboard. as per the requirement I have to show both label with data in the legend. the below component which I'm using in my application
import React, { Component } from "react";
import { Doughnut } from "react-chartjs-2";
class DoughnutChart extends Component {
constructor(props) {
super(props);
}
render() {
const chartdata = {
labels: ["Newly Added", "Edited", "Deleted"],
datasets: [
{
label: "Markets Monitored",
backgroundColor: [
"#83ce83",
"#959595",
"#f96a5d",
"#00A6B4",
"#6800B4",
],
data: [9, 5, 3],
},
],
};
return (
<Doughnut
data={chartdata}
options={{
legend: { display: true, position: "right" },
datalabels: {
display: true,
color: "white",
},
tooltips: {
backgroundColor: "#5a6e7f",
},
}}
/>
);
}
}
export default DoughnutChart;
now I'm getting chart like given below
my output
my requirement is adding values in legend(customizing chart legend). example image expected output

One way to do it would be to define data and labels before creating the chart. Then you can add the data to labels using .map method.
import React, { Component } from "react";
import { Doughnut } from "react-chartjs-2";
class DoughnutChart extends Component {
constructor(props) {
super(props);
}
render() {
let data = [9, 5, 3]
let labels = ["Newly Added", "Edited", "Deleted"]
let customLabels = labels.map((label,index) =>`${label}: ${data[index]}`)
const chartdata = {
labels: customLabels,
datasets: [
{
label: "Markets Monitored",
backgroundColor: [
"#83ce83",
"#959595",
"#f96a5d",
"#00A6B4",
"#6800B4",
],
data: data,
},
],
};
return (
<Doughnut
data={chartdata}
options={{
legend: { display: true, position: "right" },
datalabels: {
display: true,
color: "white",
},
tooltips: {
backgroundColor: "#5a6e7f",
},
}}
/>
);
}
}
export default DoughnutChart;

react-chartjs-2 chart.js: How to make strokewidth of dougnut chart thin?

I am implementing one doughnut chart in react js by using react-chart.js-2 chart.js, but I want to customize it according to my requirements, I have done already some customization, but one I need to do is, to make the width of chart thin.
Current Image
enter image description here
Required Image
enter image description here
import React from "react";
import { Doughnut } from "react-chartjs-2";
const data = {
datasets: [
{
data: [8, 25, 2, 4, 3, 21, 2],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"black",
"blue",
"red",
"purple",
],
borderColor: "transparent",
},
],
};
function App() {
return (
<div className="App">
{" "}
<h2>Doughnut Example</h2>
<Doughnut
data={data}
options={{
responsive: true,
maintainAspectRatio: false,
tooltips: false,
height: "2",
}}
/>
</div>
);
}
export default App;

Edit cutout property in options
let options = {
responsive: true,
cutout:"80%",
legend: {
display: false,
},
layout: {
padding: 10,
},
};

You need to define the cutoutPercentage option inside the chart options as follows:
<Doughnut
data={data}
options={{
responsive: true,
cutoutPercentage: 80,
...
}}
/>
cutoutPercentage: The percentage of the chart that is cut out of the middle (default value is 50).

Is it possible to remove the border between the segments but leave the border around the pie chart in react-chartjs-2?

I am using react-chartjs-2 pie chart and I'd like to remove the lines(borders) between slices BUT I want to show the border around the chart. Could someone tell me the way to do this ? Thanks in advance!
my code is like that now:
import {Pie} from 'react-chartjs-2';
class App extends Component {
render() {
return (
<div className='pieChartPositioner'>
<Pie
height={36}
width={36}
data={{
datasets: [{
data: [20 , 80],
backgroundColor: ['red', 'green'],
borderColor: 'black',
borderWidth: 2,
}],
}
}/>
</div>
)
}
}

You need to set the borderWidth as 0 in the pie's arc configuration which by default is set to 2.
The arc configuration can be used in polar area, doughnut and pie
charts and is set under the elements key.
You can change it by either:
1. Setting the global arc options
Chart.defaults.global.elements.arc.borderWidth = 0;
2. Or through the options object that you passed to the chart
var options = {
elements: {
arc: {
borderWidth: 0
}
}
};
See docs for more info.

I am writing this because marked answer didn't help me, I guess it was changed in meanwhile.
You need to set borderWidth inside datasets that you are passing to data prop.
Example:
const data = {
datasets: [{
borderWidth:0,
data: [9, 1],
backgroundColor: ['#ffffff', '#000000'],
}],
};
return (
<Pie data={data} />
)