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
Edge browser does not render chart using chart js
I am using react-chartjs-2(2.9.0) and chart.js(2.9.3) to create charts in my react app. Charts are working fine in all browsers except Microsoft Edge 44.18362.449.0.
Code:
import React, { Component } from 'react';
import { Pie } from…
Kunal Valecha
- 207
- 1
- 8
0
votes
0 answers
How to use data from database in react-chartjs-2 dataset
I have a chart built with react-chartjs-2. The chart displays when I enter the values for data directly in the datasets like this.
datasets: [
{
label: "Active Countries",
backgroundColor: gradientFill,
…
Adeola Oni
- 55
- 1
- 9
0
votes
1 answer
How i can i reduce the borderwidth of a chartjs dougnut chart
This is what i'm trying to achieve from the mockup:
But this is what I've achieved so far using chartjs:
this is my code
datasets: [
{
data: [3, 8, 13, 9, 2],
backgroundColor: [
"#D51F1F",
…
dandave
- 9
- 1
- 7
0
votes
1 answer
ChartJS Tooltips with time axis and multiple datasets
So i have a bar chart set up to display two different datasets that take place at more or less the same time, but have some missing data from hour to hour:
The data in this graph is stored in the format {x:timestamp, y:value}, and bars are all…
2lean4
- 25
- 5
0
votes
1 answer
How to get certain text from json object value
I am using react js. I have some json data where I am fetching the timestamp. It has date and time both. For example:
timestamp":"2020-03-23T14:00:00.000Z"
Now after fetching all the json data including timestamp. I wanna make a chart, but I only…
Hemlata
- 65
- 1
- 8
0
votes
1 answer
How to make bar charts and scatter dots appear underneath each other?
In chart js is it possible to have each bar exactly under each scatter dot? in below images the first one correct and second one is not.
You can check demo here demo
any help please?
webcoder
- 1,331
- 1
- 9
- 27
0
votes
1 answer
react-chartjs-2 bar touches the top
When the data is filled it hits the top of the line. is there any option to limit the top, and I need the show the number with money symbol.
I need to change the x-axis to show more than the top limit. is there any option to it
Ajith Rock
- 90
- 6
0
votes
0 answers
ChartJS doughnut - Multi line label with click event listener
I am using ChartJS library to render the doughnut chart. I have custom labels to show with the event listener. I tried by using chartjs-plugin-datalabels and chartjs-plugin-labels, but no luck maybe I am not an expert in CSS.
The final doughnut is…
Sudhir Patil
- 11
- 2
0
votes
2 answers
How to update Chartjs in Reactjs?
I am using react hooks to create chart using chartjs. With the help of socket.io, the webapp is receiving data from a nodejs server. The data gets successfully added to temp and time array, but unfortunately i am unable to update the chart everytime…
ForgottenTale
- 35
- 1
- 6
0
votes
1 answer
React and react-chartjs-2, Line chart display data with string(text)
I wanted to create a chart to display info/days. Where I wanted to display text onY-axis. I have created line using React.js. Currently I am able to display digit on Y-axis. However, is there a way to display string(text) on Y-axis?
In the link,…
koukou
- 23
- 6
0
votes
1 answer
"Process is not defined" with react-chartjs-2 CDN
I am using the React CDN specifically for one component on a dashboard page. I would like to use ChartJS in the component and noticed that it has a CDN as well react-chartjs-2. However, when I add the script I get this error:
Uncaught…
Shayne
- 155
- 4
0
votes
1 answer
ChartJS width undefined in React Typescript
I was using react-chartjs-2 with typescript + react and trying to create a simple Bar chart but my browser's console was complaining about width is undefined. I'm not exactly sure if there's anything I was not configuring right below?
Browser's…
hong823
- 21
- 4
0
votes
1 answer
options changes not seen in react chartjs 2
I have a problem to update the options of a chart in react-chartjs-2, precisely in the dragData plugin of chartjs
I have the dragData activated for the graph, that part works, the graph allows you to drag the data. The problem occurs when I click…
0
votes
1 answer
Combline labels react-chartsjs-2
i'm trying to combine labels in my x-axes:
now I have this result, but I want to have like this:
this is my data:
const dataTest = {
labels: [] as any,
datasets: [
{
label: "Main Chart",
fill: true,
lineTension: 0.1,
…
Alex
- 193
- 1
- 11
0
votes
1 answer
(Lifecycle problem?) React Chart js-2 not updating data from componentDidMount
I am trying to populate chart data from my backend.
Although I am fetching data and pushing data in componentDidMount, the Bars or Scatters are not loaded on page load.
If I change my screen width in inspect mode in google dev tools, it starts…
YLO
- 39
- 7