Questions tagged [react-chartjs-2]
452 questions
0
votes
1 answer
Problem adding name to X-axis for a chart
I'm trying to set the name to my X axis but it is not showing up on the chart. I want to add the title in the X-axis of the chart to represent the calls received on the chart
import React from 'react';
import { Card, CardHeader, Divider } from…
Jayanth V
- 49
- 5
0
votes
1 answer
Unable to resolve path to module 'chartjs-plugin-stacked100'
I am currently working on chart.js with react-chart-js-2.
My package.json includes the following dependencies:
"dependencies": {
"chart.js": "^3.6.0",
"chartjs-plugin-stacked100": "^1.0.4",
"react": "^17.0.2",
…
TheTisiboth
- 1,431
- 1
- 6
- 13
0
votes
1 answer
I want to change the position and style of the label in the React chart
I am using react-chartjs-2. I want to display the position of the label below the graph. Also, the shape of the label is currently square, but I would like to change it to a round shape. I specified option and position: bottom, but the position of…
aahhuhuhu
- 413
- 1
- 9
- 26
0
votes
1 answer
react-chart-js-2 - adding punctuation to label(s)?
I would like a dollar sign to be displayed for each dollar amount shown in this donut chart:
It's not killing me or anything, but it would be nice.
I have tried every combination of syntax that I can think of.
Full disclosure - I'm relatively new,…
Chris Mo
- 41
- 6
0
votes
1 answer
How to add several labels to the same set of data in chartjs?
I'm making a simple dashboard which has a bar chart showing the amount of orders for a company.
It shows the quantity ordered each day for the past week, the amount for today, and the amount of scheduled orders for the next days.
I am using colors…
AfonsoRCR
- 13
- 1
0
votes
0 answers
Doughnutchart add a simple '%' to the hover tooltip
I want to add a '%' to the hover concatenated to my data. So let's say I have:
const data = {
maintainAspectRatio: false,
responsive: false,
labels: ["a", "b"],
datasets: [
{
data: [50, 50],
backgroundColor: ['rgba(12, 29,…
TheDarkHunter
- 31
- 6
0
votes
1 answer
React ChartJS Donut Chart Align Rings
I'm trying to have multiple rings in my donut chart, where each ring going out is more divided.
For example, if we have a list of hours worked, I want to group it by two things, user, then by job. I would want the inner ring to be a ring divided by…
Zaedonn
- 46
- 5
0
votes
1 answer
Chart.js Doughnut Chart Rendering Wrong
I'm trying to get the output of a doughnut chart from 0 degrees to 180 degrees (Half of the circle) for practice, So I have tried the rotation option, but it didn't give me any desired result. And when tried to make a circle through circumference it…
Jayanth V
- 49
- 5
0
votes
1 answer
How can I display the percentage inside the graph and on hover?
So far, I do not yet know how to display the percentage symbol inside the graph.
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.backgroundColor;
},
borderRadius: 25,
…
JS3
- 1,623
- 3
- 23
- 52
0
votes
1 answer
How can I match the labels and the object?
I have these objects below:
const data1 = {
Tragedy: "25.00",
Romance: "50.00",
Comedy: "50.00",
others: "25.00"
};
const data2 = {
"Chick Flick": "50.00",
Tragedy: "25.00",
Comedy: "25.00",
others: "25.00"
…
JS3
- 1,623
- 3
- 23
- 52
0
votes
1 answer
chartjs cutoutPercentage and tooltips does not works in nextjs
I have this code in my next.js project where I am using the react-chartjs-2 library to create charts. the cutoutPercentage property in chart.js theoretically makes the donut chart thinner, but in next.js it doesn't work.
how can I make it to…
Mohsen Faghihy
- 55
- 7
0
votes
0 answers
How to create a react-chartjs plugin
I have created a plugin for a pie chat. The idea of the plugin is to center the data in the middle of the Doughnut.
const [data1, setData1] = useState()
const [plugins, setPlugins] = useState([])
const dashboardInfo = useSelector((state) =>…
angus
- 3,210
- 10
- 41
- 71
0
votes
1 answer
How to make a 30days chart responsive on mobile using chart.js?
I made a chart that included 30 days of absent data and I made it using the react-chartjs-2 library but the results are not responsive how to make it responsive?
this is what it looks like on a laptop:
chart on laptop
and this if it looks on…
0
votes
1 answer
How do I filter & update dates using react-chartjs-2
I am using React-Chartjs-2 on a project and am getting stuck on updating the filter of my chart. I am following along with the following demo, but this doesn't just the react one, but the vanilla…
Esore
- 243
- 2
- 9
0
votes
1 answer
ChartJS Generate Date Format
I'm using ChartJS to generate a temperature graph where the X axis is the date. But I'm not able to correctly format this data in YYYY/MM/DD format.
My Weatherdata
"weatherdata_history": [
{
"id": 70,
…
Agro SEEN
- 11
- 1