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 to add space between two scales in chart-js?
I have a line chart where in the y-axis i have some numbers from 0 to x. Since the numbers are very close to each other i need to add some space between them. I can't see option to set this in chart-js. I am using this chart-js in react using…
Kishore S
- 1,831
- 2
- 8
- 15
0
votes
1 answer
Filter/update already rendered chart.js in react.js
I'm new here, because I have decided to dive into programming, so I can fill free time between treatments in the hospital. I'm absolutely new in the programming field with no previous coding background.
The summary:
I am working on a simple page,…
tatsuo_mori
- 1
- 1
0
votes
1 answer
React-typescript chart.js error 'type' is missing in type
i am a learning typescript, recently moved from react, i am using chart js for some graph in my react-typescript project and from few hours i am getting this error
Property 'type' is missing in type '{ data: { labels: string[]; datasets: { label:…
Akshay98
- 51
- 1
- 8
0
votes
1 answer
Transferring data from a react hook to an array of objects
Encountered a problem when using react-charts. To draw a graph, you need an array of objects similar to the data:
data: [
{ "x": new Date("2020.03.18"), "y": 60 },
{ "x": new Date("2020.03.19"),"y": 23 },
{ "x": new Date("2020.03.20"),"y": 23…
Pipi
- 33
- 4
0
votes
1 answer
How to set up a simple pie chart using React in ChartJS on codesandbox
Following the react-chartjs-2 documentation and setting up a Pie chart on codesandbox gets everything working, except the options don't work.
JimmyTheCode
- 3,783
- 7
- 29
- 71
0
votes
1 answer
React Chartjs 2 display axes above datasets backgroundColor
I have a Line Chart with chart.js and one of the lines has to fill the background delimited with another line. It works well, but how can I do it to see chart axes when the background is filled ??
Here is an example of what I currently have:…
PauCasademont
- 279
- 4
- 18
0
votes
1 answer
"Cannot read propery "defaults" of undefined" error while using react-chartjs-2
Getting error after setting up chart component in react.
Error:
Code:
import React, {useEffect, useState} from 'react';
import {Line} from 'react-chartjs-2';
import './EloChart.css';
const EloChart = props => {
const [chartData,setChartData]…
vturkovic
- 117
- 2
- 8
0
votes
2 answers
Count the duplicates in a string array using React JS
Following is a code I implemented to create a bar chart using chart js in React app. Here it creates a bar chart with all the data in an array. But, I want to change this code only to give the output in the x-axis - destination, y-axis - no. of…
user11725933
0
votes
1 answer
chartjs doesn't render dates properly
I made a custom chartjs component in reactjs and want to render dates in xAxes and numbers from -1 to 1 in yAxes but it renders data not in a proper way.
import React, { useRef, useEffect } from "react";
import Chart from "chart.js";
const…
Emad Baqeri
- 2,333
- 2
- 14
- 29
0
votes
1 answer
how can I render multiple charts in chartjs?
These are the data that I have to render using chartjs in react. I made a custom component for rednering the charts, It's working properly for single line charts can't just render multiline charats here.
This is my Chartjs Custom component
import…
Emad Baqeri
- 2,333
- 2
- 14
- 29
0
votes
1 answer
Chart JS - Is there a way to connect two datasets in a line chart?
I am trying to connect two data in a dataset of Chart but I can't figure out how to do so, currently my chart looks like this:
I wanted to connect it like this:
Here's my code:
so_mc
- 149
- 1
- 7
0
votes
1 answer
how to add color to each data in chartjs scatter plot
let dataSet = [];
Object.keys(stateData).map((item) => {
let short = {};
let medium = {};
let long = {};
if (stateData[item].horizon === "Short-term") {
short["label"] = "Short-term";
…
Sai Charan
- 3
- 2
0
votes
2 answers
How can I remove the grid line in the background of the line chart?
I am working on a React JS project. In my project, I need to create line chart components. I am trying to use Chart JS 2 library for React JS. But, now I am having a little problem customising the line chart. I want to remove the grids and the lines…
Wai Yan Hein
- 13,651
- 35
- 180
- 372
0
votes
1 answer
React ChartJS Scatter Plot - cannot plot the data
I am trying to generate a scatterplot using chartJS. The plot wont graph.
When i feed in data manually by declaring the data, it works fine,
var scatter = [
{ x: 65, y: 75 },
{ x: 59, y: 49 },
{ x: 80, y: 90 },
{ x:…
GlenCloncurry
- 457
- 3
- 5
- 15
0
votes
2 answers
Customize ChartJS Hover Data Format
I have the following chart :
Which was obtained with this code:
import React, {Component} from 'react';
import { Line } from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
…
colla
- 717
- 1
- 10
- 22