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
3 answers
Set Tooltip over line Chartjs
I wanna show tooltips over the line not only on data points.
I also tried the chartjs-plugin-crosshair but it doesn't work in V3 of chartjs.
Sanaz Mahmoudi
- 98
- 7
0
votes
1 answer
Adding inner padding to chart [chart.js v3]
I'm trying to add extra padding to my chart (extra space at the right of the "orange" column):
But using chart 3.7.0 doesn't seem to work, any idea of how I can achieve this??
chart.options.scales:
scales: {
x: {
afterFit(axis) {
…
0
votes
1 answer
ChartJS: Fixed width for data-part, the rest for labels
I'm using ChartJS to display multiple charts on a page.
Each chart has a different dataset, and different labels (some have short labels, some have long labels).
Currently the width of the actual 'data-part' (the part of the chart showing e.g. Bars)…
Jeroen
- 2,011
- 2
- 26
- 50
0
votes
1 answer
Chartjs draw not all data
I need to show 127 bars but ChartJs display only 6 labels and all bars. How to increase bar height and make it more readable?
I can't set fixed height to canvas because the chart can draw 1, 10, or 150 bars, it depends on received data.
Sandbox:…
Av0me
- 3
- 3
0
votes
0 answers
ChartJS - Stacked Bar Chart not displaying data correctly (Not displaying dataset more than 20 records)
I have the following code to display the bar chart but it displays only limited dataset and not the entire JSON obtained. Can anyone please guide me to get the obtained result.
My Implementation
this.myChart = new Chart(this.canvasRef.current, {
…
Naresh Kumar P
- 4,127
- 2
- 16
- 33
0
votes
1 answer
TypeError React-Chartjs After Upgrading to Chart.js v3
Our react site is based on the argon-pro-dashboard framework.
After updating to chart.js@^3.6.0 & react-chartjs-2^4.0.0 we are getting some erros:
TypeError: Cannot read properties of undefined (reading 'prototype')
src/variables/charts.js:28
25…
0
votes
1 answer
Problem adding name to X-axis for a chart
I'm trying to set the name to my X axis but it is not showing up on the chart. I want to add the title in the X-axis of the chart to represent the calls received on the chart
import React from 'react';
import { Card, CardHeader, Divider } from…
Jayanth V
- 49
- 5
0
votes
0 answers
How to remove the bottom label and the border line in ChartJS
enter image description here
Here's my current code solution:
[enter image description here][2]
0
votes
0 answers
react-chartjs-2 Fixed date range in x axis
I actually wanted to populate a fixed date range between two different dates in X-Axis and I wanted to show the Scatter points in that range.
Here is the state :
label: 'Scatter Dataset',
data: {
datasets: typeof this.props.data ===…
Ram sai
- 21
- 8
0
votes
1 answer
Reactjs- Bar Graph-chartjs- Data not coming in individual blocks
My data format is this for bar graph: [img1][1]
The graph I'm getting is this:
[img2][2]
I want separate blocks for separate dates. What am I doing wrong here?
Implemented using
Kanika Singla
- 59
- 9
0
votes
1 answer
How to show more decimals in a Chart.js chart?
I have this chart, and the real value of the price is like 0.0000571134. The react-chartjs-2 only shows value to 3 decimals but I want the entire value to show or at least 8 decimals. I tried some settings in the datasets like stepSize but none of…
Tivi
- 456
- 4
- 22
0
votes
0 answers
Doughnutchart add a simple '%' to the hover tooltip
I want to add a '%' to the hover concatenated to my data. So let's say I have:
const data = {
maintainAspectRatio: false,
responsive: false,
labels: ["a", "b"],
datasets: [
{
data: [50, 50],
backgroundColor: ['rgba(12, 29,…
TheDarkHunter
- 31
- 6
0
votes
1 answer
Truncating canvas label in ChartJS v3.5.1
I have a bar chart with very long labels that is shrinking the canvas. I am trying to truncate the label if it has more than 10 characters. I tried a solution I found on another post here:
options: {
responsive: true,
…
Jimmy C
- 1
- 1
0
votes
2 answers
Line is rendering only vertical line instead of sloped line
Line is not rendering correctly. It's rendering as instead of
My code is as follows:
LineGraph.js:
import React from 'react'
import {Line} from 'react-chartjs-2';
function Linegraph() {
return (
…
Eldwin
- 169
- 2
- 14
0
votes
1 answer
Chart.js Doughnut Chart Rendering Wrong
I'm trying to get the output of a doughnut chart from 0 degrees to 180 degrees (Half of the circle) for practice, So I have tried the rotation option, but it didn't give me any desired result. And when tried to make a circle through circumference it…
Jayanth V
- 49
- 5