Stack Overflow
Stack Overflow

Questions tagged [react-chartjs-2]

452 questions
2
votes
1 answer

Filtering data for more visualization of data in react-chartjs-2 when you have lot of array element

I want to get proper visualized data on my chart, but it is messing up because there is 1000 of array element. I don't want to reduce the data but actually to get proper visualization because in x-axis of graph it is showing NaN…
Nitesh Singh
  • 385
  • 1
  • 3
  • 15
2
votes
1 answer

Updating a Pie Chart in React as Data is Entered

I have a react page that contains a pie chart. It returns this div as well as several other HTML components. I also have 25 input fields that update 3 variables (incomeNum, expenseNum, and savingNum) as something is typed in any of the input fields…
btror
  • 113
  • 9
2
votes
1 answer

how to Show value in pie chart Legend in react-chartjs-2

I'm using react-Chartjs-2 pie chart for my dashboard. as per the requirement I have to show both label with data in the legend. the below component which I'm using in my application import React, { Component } from "react"; import { Doughnut } from…
Sanjai Kumar
  • 67
  • 1
  • 1
  • 5
2
votes
1 answer

How to draw multiple line on y axis for same x axis in chartjs v2?

I have time series data in a database that looks like this: [ { min: 100, max: 200, avg: 150, time: 12345678.. (unix timestamp) }, { min: .. ... }, ... ] I am able to draw a line chart using the avg value by pulling…
Adi.P
  • 370
  • 1
  • 12
2
votes
3 answers

change label position in react-chartjs-3

I'm unable to change the position of the label to bottom in react-chart-js3 . It's now displaying on the top of the chart. import React, { useState, useEffect } from "react"; import { Doughnut, Line, Pie } from "react-chartjs-3"; export default…
SajZ
  • 262
  • 3
  • 16
2
votes
0 answers

ChartJS - Doughnut Segment Custom Size

I'm building a React component that generates a speedometer and I want to set the length of each segment (i.e. Red - 30%, Yellow - 30%, Green - 30%, and Gray - 10%). I'm using React-ChartJS-2 and onComplete of the animation I'm drawing the text and…
miguelfeliciano
  • 73
  • 1
  • 6
1
vote
1 answer

React-chartjs-2: Gap Between Red and Green Colors

I'm using the react-chartjs-2 library to render a single line chart with red and green segments representing different conditions. I've followed the provided documentation and code examples to create the chart, but I'm facing an issue where there's…
Nightcrawler
  • 943
  • 1
  • 11
  • 32
1
vote
1 answer

React Chart.js disabling interactivity for a single dataset

I'm currently working on a web application where I'm using Chart.js to display a line chart with multiple datasets. The chart contains two datasets, with the first dataset containing the main data points and the second dataset containing 2 data…
ksf
  • 13
  • 3
1
vote
0 answers

TypeError: Cannot read properties of undefined (reading 'labels') after passing data to React chart component

I'm trying to render a LineChart using react-chartjs-2 and chartjs library in react-typescript. Type Declaration File export type LineChartOptions = _DeepPartialObject< CoreChartOptions<'line'> & ElementChartOptions<'line'> & …
localhost_3000
  • 136
  • 7
1
vote
0 answers

how use labels plugin in doughnut in Es module

I use chartjs in my project and I need to display data on Doughnut. So, I install the plugin of datalabels import { Chart , registerables } from 'chart.js'; import { Doughnut } from 'react-chartjs-2'; import ChartDataLabels from…
hounaida rekik
  • 33
  • 5
1
vote
0 answers

Chart.js migration from v2 to v4: tick "label" paddings behave differently how can I achieve the same layout?

I'm trying to migrate Chart.js from v2 to v4. But I'm facing an issue with the padding/position of the tick label. Does anyone have an idea on how I can achieve the same result as on v2? I've also tried some hacky stuff with the labelBackdrop but…
ubik
  • 125
  • 10
1
vote
0 answers

How to create JSON data for a stacked bar chart from react-chartjs2

I am having this data from api, I want to make a stacked bar chart in reactjs from this data - [{ "project_id": 1, "project_name": "P1", "assessment_id": 1, "assessment_name": "Assessment 01", "maturity": "10" }, { …
Tanvi Narkhede
  • 11
  • 1
1
vote
2 answers

I'm having problems registering the `category` scale in react-chart-js2

I'm using react-chartjs-2 (5.2.0) and chart.js (4.3.0). I have the following React component, to show some data in a bar chart (which is basically just a copy of the Vertical Bar Chart react-chartjs-2 example): import React from "react" import { Bar…
Alexandre Gaubil
  • 199
  • 2
  • 14
1
vote
0 answers

ChartJS Piechart drawing custom shapes on hover issue

I want to make a custom tooltip for a pie chart in ChartJS. For this purpose I am drawing a custom shape at the position of the cursor on hover of the chart. It works fine when I'm hovering the chart but stops working when I'm hovering any of the…
Théodore Conrad
  • 11
  • 3
1
vote
1 answer

Stacked bar chart with rounded corners in React

I have a bar chart using react-chartjs-2 with a bunch of stacked bars, and I want all (incl. the middle ones) have rounded top corners. This is relatively easily done, but the middle ones leave an ugly white gap. What I would like is to fill these…
Yellow
  • 3,955
  • 6
  • 45
  • 74
1 2 3
…
29 30