react chart js, title is not displayed - javascript

I'm using react chart js to show a doughnut in my component.
"chart.js": "^3.7.1",
"react-chartjs-2": "^4.1.0",
I'm not able to show the title :
const data = {
labels: ["Score", "Total"],
datasets: [
{
label: "Indice d'impact global de la transaction",
data: [3.7, 5],
backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(128,128,128,0.2)"],
borderColor: ["rgba(54, 162, 235, 1", "rgba(128,128,128,1)"],
borderWidth: 1,
lineTension: 0.5,
},
],
};
<Doughnut
options={{
plugins: {
title: {
display: true,
text: "Indice d'impact global de la transaction",
align: "center",
padding: {
top: 10,
bottom: 30,
},
},
legend: {
display: true,
position: "top",
},
scales: {
y: {
beginAtZero: true,
},
},
},
}}
data={data}
/>
How can i correclty show the title ?

This is because you are using treeshaking and not importing and registering the Title
To fix it either import and registr every component you are using, list of all components can be found here like so:
import {Chart, Title} from 'chart.js';
Chart.register(Title);
Or use the auto import to let chart.js register everything for you:
import 'chart.js/auto'

Use this:
a) Ensure you have installed chart.js:
npm install chart.js
b) Import Chart and Title as shown below:
import { Chart, Title } from "chart.js";
c) Register Title as show below:
Chart.register(Title);
d) Then set the title as given below:
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Bar Chart'
}
}
}

Related

Send graph values to Chart.js template with Python Flask

I'm trying to make a data visualizer with a Flask and Chart.js api. My application has the following structure:
API
api.py
templates
index.html
static
css
estil.css
js
chartjs.js
(...)
So my idea is to put all the charts in the same file, outside the html. My problem is that I don't know how to send the data that I read from the database with Flask to the chart.js template. Surely it is very easy, but it is the first time that I touch chart.js and javascript and it is resisting me a bit.
(PSEODUCODE)
Python flask api (api.py):
#app.route('/')
def index():
fruits = []
# SQLITE3 QUERY
return render_template("index.html", fruits = fruits)
HTML (index.html):
<canvas id="myChart"></canvas>
<script src="static/js/chartjs.js"
JS (chartjs.js):
const ctx2 = document.getElementById('myChart');
const background_color2 = ['#33a3ec', '#ff6384'];
new Chart(ctx2, {
type: 'doughnut',
data: {
labels: ['Orange', 'Pineaple'],
datasets: [{
data: [82, 38],
/*
* If I put it inside the HTML with <script>TODO</script>
* it works fine for me but if I do it here it doesn't show
* me the graphics:
* data: {% values %},
*/
backgroundColor: background_color2,
borderWidth: 10,
borderColor: "#fbfbfb"
}]
},
options: {
scales: {
display: false
},
animation: {
duration: 1000,
animateRotate: true,
render: false
},
plugins: {
title: {
display: true,
text: "Juice fruits"
},
legend: {
display: true,
position: 'bottom'
}
}
}
});
As always, after not coding for a few hours comes the answer. It occurred to me to create each graph inside a function (like this):
function chartFruitJuice(fruits) {
const ctx = document.getElementById('myChart');
const background_color = ['#33a3ec', '#ffce55', '#4ac1c1', '#ff00ff00'];
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Orange', 'Apple', 'Pineaple'],
datasets: [{
data: fruits,
backgroundColor: background_color,
borderWidth: 10,
borderColor: "#fbfbfb"
}]
}, options: {
scales: {
display: false
},
animation: {
duration: 1000,
animateRotate: true,
render: false
},
plugins: {
datalabels: {
display: true,
align: 'bottom',
backgroundColor: '#ccc',
borderRadius: 3,
font: {
size: 18,
},
},
title: {
display: true,
text: "Fruit juice"
},
legend: {
display: true,
position: 'bottom'
}
}
}
});
}
And in the HTML, pass the Flask values as parameters of said function:
<canvas id="myChart"></canvas>
<script>
charFruitJuice({{ fruits | tojson | safe }});
</script>

Chart JS : Display the percentage of labels without getContext('2d')

I'm using the library chartJs to display the data that i get from my MySQL database.
In the fucntion below, AddValuesToNavigatorChart takes the browsers data and the percentage data and displays them on the pie chart.
What i need to know, is how to add '%' in my labels ?
I found few answer with getContent('2d').. using the old way, but it's not working.
This is the function :
function AddValuesToNavigatorChart(browsers, percentage) {
checkNavigatorChart()
const data = {
labels: browsers,
datasets: [{
data: percentage,
backgroundColor: [
'rgb(192,192,192)',
'rgb(255,0,0)',
'rgb(0,0,0)',
'rgb(105,105,105)'
],
hoverOffset: 4
}]
};
const config = {
tooltips: {
enabled: false
},
type: 'pie',
data: data,
plugins: [ChartDataLabels],
options: {
showTooltips: false,
plugins: {
datalabels: {
color: 'rgb(255,255,255)',
borderWidth: '2',
align: 'top'
},
legend: {
position: 'bottom',
align: 'center',
labels: {
boxWidth: 12,
padding: 15,
usePointStyle: true,
pointStyle: 'circle'
}
},
title: {
text: 'Navigator Chart',
display: true,
color: 'rgb(0,0,0)',
position: 'top'
}
}
}
};
const NavigatorChart = new Chart(
document.getElementById('NavigatorChart'),
config
);
}
Please provide the version of chartjs that you are using.
Did you mean you want to show the % in the label of the tooltip?
For version v3.8.0, here is a working code I have just made, Link
As in option, you can edit the label of tooltip as you want:
options: {
plugins: {
tooltip: {
callbacks: {
label: (tooltipItem) => {
//tooltipItem is for the slice of the pie you are hovering now
return ' ' + tooltipItem.parsed + '%';
},
}
}
}
}

Chart.js Options doesn't work in React.js

I'm trying to position legend on right of my chart but options doesn't work...
import { Chart } from 'react-chartjs-2';
import 'chart.js/auto';
const data = {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [700, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
}]
};
const TestimonialSection = () => {
return(
<div id="chart">
<Chart type="doughnut" data={data} options={{legend: {position: 'right'}}}/>
</div>
)
}
export default TestimonialSection
I just wrote this file and chart show up, only things that doesn't work is options. Also checked dependency and all look good
for the latest version this is the object structure you must do.
options = {
plugins: {
legend: {
display: false,
position: right,
...
},
}
}

How do we put labels on pie chart arcs - chart.js/vue-chart.js

I am using VueChart js/ chart js to create a pie chart in my vue project, I would like to show % of data inside the each arcs, how do we do it?
My code in Vue:
fillData() {
this.datacollection = {
labels: ['T', 'W', 'R', 'B'],
datasets: [
{
backgroundColor: [
'rgb(51,122,183)',
'rgb(226,142,65)',
'rgb(0,169,157)',
'rgb(217,83,79)',
],
data: [
this.tw.length,
this.w.length,
this.r.length,
this.b.length,
],
hoverBackgroundColor: ['#0275d8', '#f0ad4e', '#5cb85c', '#d9534f'],
},
],
};
this.options = {
responsive: true,
maintainAspectRatio: false,
devicePixelRatio: 2,
tooltips: {
enabled: true,
},
title: {
display: true,
text: 'Arcs state %',
position: 'bottom',
fontSize: 20,
},
};
},
UPDATE I tried the plugin recommended by #zb22 and this but it's not working. I did install the plugin through npm
this.options = {
plugins: {
labels: {
render: 'percentage',
fontColor: ['white', 'white', 'white'],
precision: 2,
},
},
};
I have something like below, and it shows data only when I hove over each arc
My aim is to display my chart as below:
You can use a plugin to achieve this:
https://github.com/emn178/chartjs-plugin-labels
It's well known for this purpose.
This is a demo
Chart js supported plugins page does have a solution for it, it is this plugin chartjs-plugin-datalabels . Make sure you import the module in main.js as like
import labels from 'chartjs-plugin-datalabels';
and then
Vue.use(labels)
and update your Vue page :
this.options = {
plugins: {
labels: [
{
render: 'value',
}
],
},
};
Update: A easier to use module/plugin as mentioned by #zb22 is plugin chartjs-plugin-labels
If you are using vue just import it in your Vue component like
import 'chartjs-plugin-labels';
and use it like
this.options = {
plugins: {
labels: [
{
render: 'percentage',
fontColor: ['green', 'white', 'red'],
precision: 2,
}
],
},
};

chart.js : Label inside doughnut chart

I'm trying to show the chart's information on doughnut chart in % using Chart.js. In this chart it will always contain two parts on each section I need to show the % values. Here is my code
var ctx = document.getElementById("databaseAdded").getContext("2d"),
myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [$scope.graphData.databaseAdded.syspercent,
$scope.graphData.databaseAdded.apppercent],
backgroundColor: [
'#d0b000',
'#bb112e'
],
borderColor: [
'#d0b000',
'#bb112e'
],
borderWidth: 1
}]
},
options: {
showDatasetLabels : true,
cutoutPercentage: 41,
legend: {
display: true,
position:'bottom',
labels: {
fontFamily: "myriadpro-regular",
boxWidth: 15,
boxHeight: 2,
},
}
}
});
One more thing is Legend information is different and label information is different. Legend I can able to get, But I'm facing problem on getting Label Info. Below I upload image that how labels will look like. Please take a look.
Thanks for everything!
You can use the library "Chart PieceLabel".
After you add the script, you probably should add another option: "pieceLabel".
Define how you like.
pieceLabel: {
// mode 'label', 'value' or 'percentage', default is 'percentage'
mode: (!mode) ? 'value' : mode,
// precision for percentage, default is 0
precision: 0,
// font size, default is defaultFontSize
fontSize: 18,
// font color, default is '#fff'
fontColor: '#fff',
// font style, default is defaultFontStyle
fontStyle: 'bold',
// font family, default is defaultFontFamily
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}
You can do it with chartjs-plugin-datalabels:
import Chart from 'chart.js'
import ChartDataLabels from 'chartjs-plugin-datalabels'
const myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
options: {
plugins: {
datalabels: {
color: '#ffffff',
formatter: (value) => {
return value + '%'
}
}
}
}
})
In this example you get white labels with % sign appended.

Categories

Resources