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
Add Axios to React chart and take JSON data
I am currently practising React and getting used to charts.
I had a tough time when using React chart and calling Axios to get information from online JSON file.
It works perfectly with pre-programmed values but when calling using Axios it dosn't…
Pranoy Mathew
- 41
- 1
- 7
0
votes
1 answer
How to configure multiple bars on same chart using react-charts
I have a react wherein I am able to display the. For this i am using react-charts library.
To populate chart data I am making a API call and thereafter updating the state. I want to display multiple values for YAxis.
My sample API response…
Reema Parakh
- 1,347
- 3
- 19
- 46
0
votes
1 answer
React-charts not updating with data
I am new react, and want to display charts in my component, wherein the the data should be populated from the API response.
My sample API response is:
{
"result": 1,
"data": [
{
"data1": "1272.00",
"data2":…
Reema Parakh
- 1,347
- 3
- 19
- 46
0
votes
1 answer
React native pure chart negative value is not drawing
I am using line chart for showing data. It working absolutely fine but if my data has negative value in that condition my chart is cutting from bottom.
You can see my error in above image which marked with red color.
I used react-native-pure-chart -…
Mayur Coceptioni
- 433
- 4
- 17
0
votes
1 answer
How can I draw a line to the highest datapoint in chart js?
I've been consuming the Chart JS documentation but I think this is probably more computer science / math based of a question. I'm trying to draw a line that extends from the bottom of my chart to the top of the highest data point. Here's a link to a…
Sean Kelly
- 901
- 7
- 27
0
votes
0 answers
ChartJS - How do I remove the X-Axis color overlay on the chart?
I styled the ChartJS X grid lines a specific color, but the X Axis gridline has a default color that overlays the color I styled the grid lines with, does anyone what the reason could be that this is occurring?
Heres the…
0
votes
1 answer
Remove zeroline in chartJS Horizontal Bar chart
I have a horizontal bar chart which looks like this:
It's implemented with react-chartjs-2:
import React from 'react';
import { HorizontalBar } from 'react-chartjs-2';
import 'chartjs-plugin-datalabels';
// import styled from…
Artur Takoev
- 127
- 2
- 11
0
votes
1 answer
How to add colored points with white shadow border in chart.js?
trying to add colored points with white shadow border in React chart.js Version: 2.7.2 but no luck please any help.
what I have now
my code:
…
Fadi
- 2,320
- 8
- 38
- 77
0
votes
1 answer
Make a chart clickable when placed under another SVG
I am having trouble working with some SVG in React Native.
I have a chart that is clickable and works well, I then needed to place another SVG on top of the chart in order to draw a line that would represent a limit score value. The problem that I…
Gab
- 37
- 5
0
votes
0 answers
Push Dynamic Random Colors into deep nested chart state?
I'm trying to push dynamic colors into my chart but I'm having difficulty doing so. In my state, I have the background color inside of an array of objects for my data sets. However, I'm unsure of how to push my dynamic colors into it.
Reason I need…
InoCuro
- 135
- 12
0
votes
1 answer
Testing Chart.js Plugin with React and Jest/Enzyme
For my project, I am using React and Jest/Enzyme. I built out a reusable Doughnut Chart component and used a plugin to render text in the middle of the Doughnut Chart. Here is my code.
export default class DoughnutChart extends React.Component {
…
Ken
- 71
- 2
- 4
0
votes
0 answers
Chart.js cut line on annotation
I'm using react-chartjs2 lib, and I get something like this
Now I'm wondering if Is there a way to cut blue line on the today annotation line?
Something like this:
If I just cut data at today annotation, I'll get downfall line and it looks…
Markuz Shultz
- 678
- 3
- 9
- 22
0
votes
0 answers
chart js annotation label text is cutting of
I am using react-chart js in my graph I am drawing a multi-vertical line using annotation this my sample code i had used to draw line
const testValue = ['0.019', '0.033', '0.305', '0.428', '0.582', '0.826'];
const splitArrayPopup =…
6round
- 182
- 4
- 18
0
votes
0 answers
Reactjs: How to add dataset dynamically in bar chart
I am using react chart js. iI had added bar chart in my page, my chart data is:
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
backgroundColor: '#db3eb1',
…
6round
- 182
- 4
- 18
0
votes
1 answer
Unable to pass on data from json file to labels and datasets in chart.js
I'm trying to load JSON data externally and pass it on to datasets and labels.
When I start the server I see the data being called in developer options, however, the same does not reflect in the bar graph.
I tried using fetch function to call my…
neeru neeraja
- 35
- 8