Questions tagged [react-chartjs-2]
452 questions
2
votes
1 answer
TypeScript issue How to pass parameters in a custom plugin for Chart.js and react-chartjs-2
I created a custom plugin horizontalArbitraryLine
import { Plugin } from "chart.js";
export const horizontalArbitraryLine: Plugin = {
id: "horizontalArbitraryLine",
beforeDraw(chart, args, options) {
const {
ctx,
…
blank
- 23
- 4
2
votes
1 answer
React Chart.JS cant move legend (TypeScript)
I have a Doughnut chart component with this data:
const data = {
labels: ["1", "2"],
datasets: [
{
label: "peers",
data: [1, 2],
backgroundColor: ["#56E2CF", "#56AEE2"]
}
]
};
The data works…
Jorge Montejo
- 485
- 1
- 6
- 17
2
votes
1 answer
Add a gradient background to react-chartjs-2
I am currently trying to add a gradient background with a slight transparency to a radar graph inside a react component. I have only been able to find solutions for this problem by referencing a chartjs canvas within an html file, but no solutions…
smartish
- 31
- 5
2
votes
0 answers
how to show text inside a chart - pie and doughnut?
I have tried a lot of it, but nothing seems to be working as expected.
I need to show the text inside the pie chart.
For the above, I tried using chartjs-plugin-datalabels but then used a formatter to change a value to a value with a…
Sai Krishnadas
- 2,863
- 9
- 36
- 69
2
votes
0 answers
Cannot see labels and legend on the pie chart of react-chartjs-2
I cannot see legends and and labels even I hover on it.
Now I am using "chart.js": "^3.7.1", "react-chartjs-2": "^4.1.0"
I copied code from several example, but none of them were helpful. I guess this is because of examples are not compatible with…
이경복
- 21
- 1
2
votes
1 answer
TypeScript issue with custom plugin and afterDraw callback Chart.js and react-chartjs-2
The type for chart is now inferred but I'd like to use a proper type without having to resolve to using any and disabling rules.
const plugins = [
{
id: "tooltipLine",
afterDraw: (chart: { tooltip?: any; scales?: any; ctx?: any })…
Mirha Masala
- 323
- 3
- 15
2
votes
1 answer
With react-Chart-js2, is there a way to add more fields to the datasets, for example, text that accompanies data that was submitted?
I have a chart that displays people's predictions on events from a scale of 0-100. To accompany their submissions, I ask for a comment explaining why they said what they said. This is a crowdsourcing project so it would benefit other users if they…
fourteen14
- 75
- 7
2
votes
1 answer
React chartjs-2 - Increase spacing between legend and chart
I am using react chartjs 2. I need to increase margin between legend and chart. Here I found many solutions that are not for react or nextjs. That's why I need to solve it with react environment. Please help me.
Here is my code-
import { Box,…
user18136092
2
votes
1 answer
react chart.js time scale does not work with date-fns adapter
I am trying to get the time scale (x axis) work with date-fns adapter and getting "error" for chartjs-adapter-date-fns which could be the issue:
Could not find a declaration file for module 'chartjs-adapter-date-fns'.…
koubin
- 579
- 5
- 9
- 30
2
votes
0 answers
Custom legend labels react-chartjs-2
I look all over the chartjs documentation and StackOverflow issues but can't find an example of how to custom legend labels in react-chartjs-2.
I want to switch the default labels to checkboxes like the photo:
can someone please help me with that?
Daniel Raz
- 41
- 4
2
votes
3 answers
React Js and Chart Js (Line Chart)
I am trying to add line chart from chart js in react component. I have tried the following code but its showing white screen and no errors. I couldn't figure out what i did wrong. I went through chart.js documentation and got confused. Please give…
charlie2
- 150
- 2
- 10
2
votes
1 answer
react-chartjs-2 TypeError: undefined is not an object (evaluating 'nextDatasets.map')
I'm working on creating some charts from some Notion databases. I have a nodejs backend that queries the Notion API and (I think) properly formats the data for use in chartjs. Then I have a frontend using react-chartjs-2. When I run the React app I…
philolegein
- 1,099
- 10
- 28
2
votes
0 answers
react-chartjs-2 not able to customize x axis labels
I am trying to customize the x Axis labels using react-chartjs-2.
I can use the callback function in the ticks option in the chart options but the value and values that I get as parameters in the callback function is not necessary as they are just…
Alan Z
- 803
- 1
- 7
- 13
2
votes
1 answer
react I want to hide the y-axis values and tooltip in the react chart
I am using react-chart-2.
When I hover the line graph, the tooltip is displayed, but I want to hide the tooltip when I hover the line graph.
I also want to hide the numbers 0,0.1,0.2 to 1 on the left (y-axis) of the line graph.
How can I implement…
user16590865
2
votes
1 answer
how to display the first and last grid complete in chart js in type line
I am new to chart js and want to implement it in reactjs project. I am using a line graph and want to display the tick under each image. For that purpose, I assigned a dynamic width to the line graph i.e. if there is 2 image then the width will be…
ZiaUllahZia
- 1,072
- 2
- 16
- 30