interactive react charting components using the chart.js framework
interactive react charting components using the chart.js framework
Questions tagged [react-chartjs]
585 questions
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
React-Chart.js legend onClick function
I'm working on a bar chart with multiple stacked datasets using the react wrapper for Chart.js(https://github.com/reactchartjs/react-chartjs-2).
I've been trying to make the chart show only one dataset at a time, but I'm having trouble coming up…
user17018145
- 11
- 4
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
How to log the callbacks (object) for Chart.js tooltips? (v3.0)
I'm trying to make custom tooltips for Chart.js (v3.0), however, when I console.log the context of the function it says:
TypeError: Converting circular structure to JSON
Is there a way to log this, so I can see the available data??
Code Example:
…
Izzi
- 2,184
- 1
- 16
- 26
0
votes
1 answer
Using Chart.js in functional React component, not allowing me to toggle data: "properties undefined"
I'm trying to make dynamic data in a Chart.js chart, but how do I make the chart const available to a toggle function?
The chart displays fine, but then I can't update it at all. I believe this is due to scoping. How do I return the Chart.js objects…
Izzi
- 2,184
- 1
- 16
- 26
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 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
How to rotate to center of a dataset using Chart.js (Doughnut chart)
I'm using the latest version of Chart.js and using Doughnut Chart type. I have doubts on how to find the center of a dataset and rotate to it.
When I click on some datalabel, I need the center of the dataset go to startPosition 0.
I know the…
Rômulo Argolo
- 15
- 1
- 7
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
0
votes
1 answer
How to remove a vertical line from the canvas of react-chartjs-2?
I need some help.
I am developing a project in React JS. I am using react-chartjs-2 for displaying charts. I have to add a range slider for the chart to control values on x-axis and two vertical lines. The position of one vertical line on the chart…
Farhan Ali
- 116
- 5
0
votes
1 answer
ChartJS: Adjust Tooltip with sums in body
I have the following output at the moment:
However, I would like to have the following table:
Minimum: 90
25th: 95
25th to Median: 100
(the blue one I dont want to show)
75th: 105
Max: 110
I have the following code, I hope this will be…
Legan
- 39
- 7
0
votes
1 answer
How to show tooltip only for show x values in react charts
I have a line chart where I am displaying only four values but my datasets are larger and as you can the dot on line is shown for all datasets. Is there a way to show only the circle pointer only for x values that are displayed?
Kishore S
- 1,831
- 2
- 8
- 15
0
votes
1 answer
Display JSON data in react-chartjs-2
I have JSON data that gets returned from the backend in the following format:
[
0: {
candidateId: "1",
constituencyId: "2",
count: 50
},
1: {
candidateId: "2",
constituencyId: "2",
count: 20
…
user15187712
- 57
- 1
- 5
0
votes
2 answers
How to display grid lines (without showing label) between each ticks?
I'm using Chart.js 2 (React-chart-js 2) to display a line chart.
Does anyone have any reference to keeping the vertical gridline between each displayed label?
It seems like the vertical gridline only showing on each displayed label.
Cuong Nguyen
- 407
- 4
- 7
