Questions tagged [react-chartjs-2]
452 questions
0
votes
1 answer
how to show X and Y labels on points in Chart js 2 Line Chart
I have made a line chart by X and Y axis using chartjs 2 in react js
when I hover a point I wanted to show both x and y axis in the box appeared but I only got X axis
Here is the code.
I have used scatter chart .
I want Line Chart point hover as…
Haseeb Ahmed
- 19
- 3
0
votes
1 answer
React-Chart-JS2 labels inside Doughnut chart
I need to make Doughnut chart with React-Chart-js2 . Chart should look like below
Questions:
I have added Data(12%,10% etc) in the chart. But how to add labels (1 star, 2star)?
How to put text (1234 Total Feedback) in the center of chart?
Is it…
Akanksha
- 123
- 1
- 3
- 14
0
votes
1 answer
React Chart.js BarGraph not updating
I'm trying to implement a bar chart using react-chartjs-2, but I have some problems passing data to it.
If I declare the array directly when calling the graph, it works:
render(){
return(
Daniel Zufrí Quesada
- 35
- 4
0
votes
1 answer
How to manipulate data in react-chartjs-2
I want to display data on y axis with specific currency sign in the highlighted area like in tooltip. I have customize the tooltip but the dynamic data provided to graph is not controlled by me.
Here is the code I have tried
Shoaib
- 90
- 2
- 11
0
votes
0 answers
Creating doughnut chart in React
I create a sample doughnut in my react project. Now what I want to do is add dynamic content in the center of the chart. I searched in the internet and youtube but I couldn't find any document related to this. If you can please let me know a way to…
Malsha Madushani Kalahewaththa
- 186
- 3
- 19
0
votes
1 answer
How do I prevent Chartjs tooltip callback returning multiple instances of the same value?
I am using Chartjs with React. I have a cryptocurrency price chart with three datasets with one being a list of prices, one being a horizontal line that is tangent to the initial price and another horizontal line that is a tangent of the highest…
TDonnally
- 67
- 10
0
votes
2 answers
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…
Supriya Kumari
- 181
- 2
- 14
0
votes
1 answer
React TypeScript - Chartjs Annotations - Bar Annotation not showing correctly
My annotations are set to:
annotation: {
events: ["onClick"],
annotations: [{
drawTime: "afterDraw" as "afterDraw",
type: "box" as "box",
xMin: "2 Sep",
xMax: "4 Sep",
yMin: 0,
yMax: 50,
backgroundColor: "green",
…
Robert Stevens
- 7,817
- 3
- 13
- 15
0
votes
1 answer
ChartJS Adding Different Lines for each column
I have a bar chart in my react app, and I want to add different limit lines for each column. Does anybody know how to configure it?(For chartJS < 2.9.0) The following is an example of what I am trying to do:
0
votes
1 answer
How to make labels on both side from horizontal bar chart js
I want to make side labels for double horizontal bar on both side like this: pic 1, pic 2
can someone help me idk how to do it, im new in react and chartjs
this post continued from: How to make multiple horizontal bar chartjs
here's what i…
CepotOi
- 5
- 6
0
votes
1 answer
chartjs-2 pie chart how to remove lined tool-tip
I want to remove this stupid lined tooltip or whatever this called
does any1 know how ?
elad BA
- 1,760
- 11
- 17
0
votes
1 answer
plot line graph in Chartjs 2 when number of data in yaxis is not eqaul to number of data in xaxis
I have two arrays for ploting the graph. Let me tell with an example.
yAxis = [2, 4, 6, 7, 8, 9]
xAxis = [10:10, 10:20, 10:30, 10:40, 10:50, 11:00]
In this case, graph will plot correctly.
Then after clicking some button 'A' in my page, the xAxis…
Raru
- 371
- 1
- 4
- 19
0
votes
0 answers
Get percentage of line bar chartjs
React ChartJS.
How can I make a chart like this? I have normal type Line bar but I want to get the percentage too.
Thanks.
Henrique Mota
- 134
- 1
- 11
0
votes
0 answers
Conditional hover effect on the selected data using Chart.js
I want to disable the hover effect on certain data points of a dataset under certain conditions using Chart.js.
I basically need to modify the dataset before drawing the line graph so it looks in the way i want. (e.g extending the line along x axis)…
Furkan Kalaycioglu
- 66
- 4
0
votes
0 answers
Chart Js custom tooltip with callback function to send some details
Problem Statement:
I am trying to build chartJs in ReactJs. I want to make customized tooltip with callback function or similar option so I can display details inside tooltip. Is there a way to make it possible?
Output for ChartJs tooltip
My…
Rohit Desai
- 1
- 3