Questions tagged [react-chartjs-2]
452 questions
1
vote
0 answers
chartJS legend border issue in reactJs
Hey everyone I am experiencing some issue with the legend of chartjs
Every time i increase the borderWidth property of a dataset it increases the legends borderWidth as well - Current Behavior
But i want to increase the width of the line without…
Kevin Solomon
- 11
- 1
1
vote
1 answer
Manipulate x axis label positioning. React Chartjs 2
I am trying to make a an area chart that has x axis labels displayed above the actual axis itself. Here's an example:
I have the axis labels, but I cannot find a way to move them just above the X axis
Chart.register(CategoryScale, LinearScale,…
Cole Ogrodnick
- 124
- 2
- 9
1
vote
1 answer
Custom tooltip in Chart JS(React implementation) works incorrectly with interaction intersect false
So there is a problem with custom tooltip interaction in ChartJS using it with React.
Example of current behaviour of custom tooltip
So originally I use interaction with intersect: false for my chart, and I want to tooltip appear while I just…
Roman Telyatnik
- 11
- 1
1
vote
1 answer
How can I assign green for an uptrend in line chart in chart-js and red for a downtrend in chart-js?
I want to assign green for an uptrend in line chart in chart-js and red for a downtrend in chart-js. I am relatively new to chartjs and I am not sure how to access the data elements to spot an uptrend or a downtrend.
import React, { useEffect } from…
user460567
- 133
- 9
1
vote
1 answer
How to enable react state to update a chartjs label?
Trying to update the text in the center of a doughnut chart when the prop month changes.
Screenshot of chart, as you can see January did not update, but price did.
However chartJS never updates past the initial month, January, even though it will…
Kevin Z
- 11
- 2
1
vote
1 answer
Is there anyway to overlap one barchart with another in chart js without stacking them?
I tried using the stack and offset but it does not seem to work
This is my code:
import React, {
useEffect
} from 'react';
import {
Bar
} from 'react-chartjs-2';
import useWindowWidth from 'wa-shared/src/hooks/useWindowWidth';
const state = {
…
Abishek Velavan
- 13
- 2
1
vote
2 answers
Remove x tips outside Line Chart on crossing of X,Y axes at the beginning Chart.js
The question is, if it's possible to remove this extra ticks
from the chart, to let the graph start exactly from the beginning, without those extra ticks. It's very important for me, because originally I need to hide X axes, and it looks a bit…
Roman
- 83
- 7
1
vote
2 answers
how to centre and fix size of a pie chart while offset is added from react chartjs 2?
I need to center the pie chart into a component/div and also reduce the size of the chart to fix the cutting out in the ends.
Its cuts-off at bottom and sides.
Code:
export const data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple",…
Sai Krishnadas
- 2,863
- 9
- 36
- 69
1
vote
2 answers
Chartjs : is it possible to add border to the datalabel text within the dougnut chart react
Is it possible to add border color to the text.
https://codesandbox.io/s/react-chartjs-2-doughnut-pie-chart-forked-j3dhsn?file=/src/index.js
Raphael
- 1,738
- 2
- 27
- 47
1
vote
1 answer
How to align horizontal bars to the right
I'm using react-chartjs-2.
Shotiko Topchishvili
- 2,663
- 10
- 20
1
vote
0 answers
chart.tsx:70 Uncaught TypeError: Cannot read properties of undefined (reading 'labels')
i'm trying to create a chart but facing this error. this is my first time creating a chart.
it looks like error is coming from ForwardRef or i did some mistype..
here's the error snapshot
import React from 'react';
import { Card, CardHeader,…
M Shushant
- 23
- 3
1
vote
1 answer
is it possible to have cross line within bar chart in chartjs like the below image
I see we can change the color but is it really possible to have colored lines like this
https://codepen.io/diasraphael/pen/mdXzdqr
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
…
Raphael
- 1,738
- 2
- 27
- 47
1
vote
2 answers
React + ChartJS V3: Annoations don't work
I'm using react-chartjs-2 v4.1 with ChartJS v3.8 in typescript.
I'd like to draw a horizontal line through my bar graph as shown below:
I find many half-written examples of which I cannot create a functional one. I couldn't find any complete,…
DarkTrick
- 2,447
- 1
- 21
- 39
1
vote
1 answer
react-chartjs-2: How to customize the onHover tooltip
In a react-chartjs-2 bar chart: How do I customize all the information shown inside the tooltip when hovering over a bar?
I would expect something like data.datasets[x].tooltip.callback to be available, but I can't find anything…
DarkTrick
- 2,447
- 1
- 21
- 39
1
vote
1 answer
Chart JS Layered Vertical Bar Chart
I am using react-chartjs-2 in my project. Let's take the first column in the example I gave. The value of blue is 50, and the value of green is 20. In this case, my expectation is that green should be 20 below blue, and blue should be 50. But…
Serhat
- 15
- 4