Questions tagged [react-chartjs-2]
452 questions
31
votes
9 answers
react-chartjs-2 with chartJs 3: Error "arc" is not a registered element
I am working on a React app where i want to display charts. I tried to use react-chartjs-2 but i can't find a way to make it work. when i try to use Pie component, I get the error: Error: "arc" is not a registered element.
I did a very simple react…
Vince M
- 890
- 1
- 9
- 21
13
votes
1 answer
Set a limit / max number for legends
Lets say I have a Donut chart with 5 items in data like this
const data = {
labels: ['E-commerce', 'Enterprise', 'Green', 'Grey', 'Purple'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 3],
backgroundColor:…
Altro
- 878
- 1
- 7
- 23
12
votes
1 answer
react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element
I am currently trying to build a LineChart via react-chartjs-2. To do that I am using TypeScript. I do not get any errors while implementing. The webiste renders normal, but when I try to open the component that renders the LineChart I get the…
Jibbolito
- 183
- 1
- 8
8
votes
1 answer
Time Series Line chart js in react not working
R/python user, new to javascript. I am trying to do something which I thought would be simple, a basic time series chart using chart-js in react.
I don't seem to be able to get the axis to work properly, probably a really basic error but I can't…
Joshua
- 184
- 1
- 11
7
votes
2 answers
Adding data labels inside charts in ReactJS is not working?
Example How to display data on top of line chart
issues faced while implementing:
chartjs Plugin "chartjs-plugin-datalabels:1.0.0" import is throwed below error
TypeError : Cannot read property 'extend' of undefined.
Above error resolved by…
Rajath
- 2,611
- 8
- 27
- 43
6
votes
3 answers
React chartjs 2 - Type 'string' is not assignable to type '"timeseries"'
I've been trying to set x-axis as timescale in react-chartjs-2, but can't get past this following error.
Chart options code snippet:
const options = {
plugins: {...},
scales: {
x: {
ticks: {
autoSkip: true,
…
moze
- 322
- 1
- 5
- 14
6
votes
3 answers
Chart.register is not a function
I'm trying this example of reactjs Streaming chart
https://nagix.github.io/chartjs-plugin-streaming/latest/tutorials/react/app.html
but I can't seems to make it work, it compile without problem but dosnt show anything in the browser, and when I…
GhaDa MJT
- 61
- 1
- 2
6
votes
1 answer
bar chart not showing geting Error: "category" is not a registered scale
I'm trying to show bar chart in the reactjs. i also downloaded dependecies of bar chart chart.js and react-chartjs-2
"chart.js": "^3.6.0",
"react": "^17.0.2",
"react-chartjs-2": "^4.0.0",
"react-dom": "^17.0.2",
"react-scripts":…
Pradip Chinta
- 61
- 1
- 2
6
votes
1 answer
ChartJS - rolling twenty minute view
Code below,
is there a way to get 'realtime' with a rolling twenty minute view? can't seem to find anything in the options that enables this.
ChartJS version 2.9.4
import 'chartjs-plugin-zoom';
import { Line } from 'react-chartjs-2';
import…
Shanon Jackson
- 5,873
- 1
- 19
- 39
6
votes
2 answers
scattered graph with xAxes of date react-chratjs-2
I'm trying to implement a graph with scattered date properties but chart is rendering all the dates with the same distance from each other.
{
"ndvi values": [
0.1158,
0.1975,
0.1913,
0.2137,
0.1603,
…
Emad Baqeri
- 2,333
- 2
- 14
- 29
5
votes
1 answer
react-chartjs-2 time adapters, "time" is not a registered scale
i tried to import the time adapters to my ReactJS project but look like it's not working. I wasn't able to configure Chart.js to work with 'chartjs-adapter-date-fns'. My code is below.
I imported them like this:
import {
Chart as ChartJS,
…
emirefek
- 452
- 4
- 9
4
votes
1 answer
React Charts - Display pie chart despite zero values (Equally distribute sections and display colorized chart when all the values are zero)
So react-charts-js-2 by default hides the chart when both values are zero. We're trying to avoid 'No data available' sort of messages or displaying icons that represent no value.
What we desire to achieve is to display the chart regardless of…
emre-ozgun
- 676
- 1
- 7
- 17
4
votes
1 answer
How to add space to start and end of x-axis in chartjs on react....i have tried using "offset:true" but it does not work if the label are more
Currently it look like this - https://mm5qkg.csb.app/ --- sandbox
Using "offset:true" is working if the labels are less but it start decreasing as the label quantity start increasing
I tried many solution but it didn't work
I am using it with…
RAJesh
- 43
- 3
4
votes
1 answer
Cannot find module /chartjs.helpers while using chartjs-plugins-datalabels (ReactJS)
I am trying to add datalabels on top of my Bar chart
import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Avi solanki
- 53
- 1
- 6
4
votes
1 answer
react-chartjs-2 tooltip callback not working
I'm using react-chartjs-2 library to make simple charts in React. I tried to customize a bit the tooltip by adding a title:
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
return tooltipItem?.value + ' test';
}
…
Đông Nguyễn Tấn
- 43
- 1
- 1
- 3