Questions tagged [react-chartjs]

interactive react charting components using the chart.js framework

interactive react charting components using the chart.js framework

585 questions
0
votes
0 answers

How to have several column for one label in chart in react?

I have this JSON data coming from the server and I want to make a bar chart in react with it but because there is only one date for each index of arrays is there any charting library that supports this or any other solutions? results: [{ date:…
ErfanFi79
  • 36
  • 6
0
votes
1 answer

Chartjs: How to programatically remove (unhighlight or make inactive) all the active points on chart

I am using Chart.js ver: 2.9.3. I am using custom tooltip to show up on the click of the bubble type dataset. Please refer below image: Now, I want to unhighlight (make inactive) all the bubbles programatically on the click of the button. Can…
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
0
votes
1 answer

Is there a max width of canvas Chart.js can draw charts within?

I recently started working with chart.js with react wrapper for a project. And when I was building this one chart which has a width of 20000px the bars stopped appearing on the screen after the 16390px length. My chart was scrollable and I had a…
Lalit Sharma
  • 354
  • 2
  • 12
0
votes
2 answers

Create a prop for a chart.js pie chart

I'm using Chart.js inside my react project. and i want to structure my project as neatly as possible by creating components and calling them on my App.js How can I go about creating a react prop and calling it from another component without Actually…
0
votes
1 answer

Unable to display data in Bar Chart using react-chart-2

I am trying to use react-chartjs-2 the React wrapper for chart.js. I am not sure why I am unable to display a Bar Chart. It might be how I'm setting the state for the data prop. My data that is returned from the API I want to display in the chart is…
bwang
  • 49
  • 7
0
votes
1 answer

How to create a scatter plot where x-axis represents a day by hours with datetime object? chartJS

I am creating a scatter plot with chartJS and react-chartjs-2. I am getting data for x-axis in the format of : 2020-07-06T09:17:15.424+00:00 for the y-axis I will get data in the format of: HH:mm I would like to have an x-axis which would…
0
votes
1 answer

ChartJS vertical bar chart - measure percentage of the data in each column based on a specified max

I hope my title is well enough formulated, i am very new to chartJS actually just started i read the entire documentation multiple times and have done many simple to medium difficulty examples. I am trying to graph the results of a test by…
Steytz
  • 324
  • 1
  • 3
  • 11
0
votes
1 answer

Chartjs 2 Line Graph Single Stroke Between Datasets

I'm trying to make a line graph with a single stroke between each datapoint on the graph. There should be a small space between each side of the datapoint. I see that the docs say to use borderDash but the strokes will run through my datapoints…
user2465134
  • 8,793
  • 5
  • 32
  • 46
0
votes
1 answer

Pass function elements to render in js

I have in js a class function called contenidoNuevo() which triggers depending on the difference of dates I have in my web application. In the else statement I have a Card class which includes the line chart from react-chartjs-2. I would like to…
0
votes
0 answers

I'm using https://www.chartjs.org/ ... how could i get the graph data by clicking the x-axis label ChartJS ReactJS .?

need to select xaxis data .. for example if i select Jul 15 the Jul15 value should get.. example is there any solution for this requirement, please..?
0
votes
1 answer

How to make custom text appear underneath each bar in chartjs bar chart?

In chart js bar chart is it possible to have custom text exactly under each bar ? 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

wrong output while building population chart in react

I am very new to react and I'm trying to fetch population data from API using Axios and display population of world-changing overtime. Something like this. I am trying to build this using chart-race-react. There is only one example in the…
Zodiac
  • 121
  • 1
  • 9
0
votes
1 answer

Material table nested rows expand/collapse in reactjs

I am having a react-chartjs with material-table integrated, find it in this link: https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx As you may see that on the click of any bar, a table is populated. The values in that table are…
0
votes
1 answer

How to use dynamic data in react-chartjs when using react hooks?

I am trying to make a Bar chart using react-chartjs-2. I have the chart data in my state but it takes some time to show up as the data is coming from an API. I tried to solve it using if else but it did not work. I want to know the proper way to put…
Manoj Rawat
  • 312
  • 5
  • 12
0
votes
1 answer

TypeError: Cannot assign to read only property ... - Editing react-chartjs-2 datasets with Redux

I'm a novice at React & Redux, so excuse me if there is an easy solution to this - I'm not able to find one currently. I'm utilizing react-chartjs-2 with Redux to create some charts with dynamic data based on s. The core of the chart code can…
user6412179