Questions tagged [react-chartjs-2]
452 questions
0
votes
1 answer
Pass id or class name to points(ticks) inside canvas
I am using react-chartjs-2 to render charts and on clicking the active point it gets redirected to some other page.
{
// redirects to some other page
…
0
votes
2 answers
Labels shrink my PieChart size in react-chartjs
I'm using react-chartjs-2 (version 4.3.1 ). As you can see in image, even if I use same component, width & height aren't same anymore because of labels. I want to display like left side piechart even though there're many labels in right side. How…
Denny
- 167
- 4
- 8
0
votes
1 answer
Importing a react-chartjs-2 component is causing app to crash
My react app has been working fine using a component imported from react-chartjs-2 for a while but recently it started to crash after having made no changes to that area of the app.
I get the below errors multiple times in the console, the invalid…
Jowin
- 9
- 2
0
votes
1 answer
react-chartjs-2 color background columns alternately
i am using react-chartjs-2 in a project and i am still trying to find a solution on how to color the evenly all the columns with the same logic of the image below
i found that chartjs has plugins -> annotations to do that, but it seems that is not…
Luke
- 25
- 6
0
votes
0 answers
Chart.js - add custom, finite set of ticks at specific positions along axis
I am trying to create a Chart.js line chart with a set number of ticks at fixed positions on the Y-axis. The Y-axis represents distance, but I only want to display certain fixed points along the axis.
Each point has a label independent from its…
jonah0
- 23
- 7
0
votes
1 answer
How to display the dates of month which has no Data from database in react js
I wanted to show the Monthly sale of a shop, the charts show the total sales per date of the month. The below sales amount and dates are from database, I wanted to show all dates of the month (until 1-till current date) like today is 27, so it show…
Lucky
- 187
- 13
0
votes
1 answer
background image is not displaying in react-chartjs-2
I want use image background in react-chartjs-2 but its not working.
I tried in plane chartjs page and its working without any problem.
const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
const plugin = {
id:…
Awat
- 3
- 3
0
votes
1 answer
How to make vertical line when hovering cursor (Chart js)
Hay everyone, I am trying to make vertical line drawing on chart when I hover my mouse on some dot.
I saw some solutions online but I didn't figer it out how to implement it on my code because I am very new at react js
this is an example of chart…
roee attias
- 153
- 4
- 15
0
votes
2 answers
react - override the style of canvas
This is the current UI
I want to remove the background-color of the the numbers(1-10), which is #fff.
Is it possible to do so?
App.tsx
import React from "react";
import {
Chart as ChartJS,
RadialLinearScale,
ArcElement,
Tooltip,
Legend
}…
CCCC
- 5,665
- 4
- 41
- 88
0
votes
1 answer
Is there any way to hide default yAxes line and only show the values on yAxes in react-chartjs-2?
I have a little experience with chartjs but I am unable to find a way to hide the default line. I'm adding this image here which I need to fix.
I need to hide the line like this one
https://i.stack.imgur.com/UXMpi.png.
I need to make it like this…
Ali Zain
- 3
- 1
0
votes
1 answer
Chartjs: Overlap of color fill between 2 line series react chartjs
while filling the color between 2 line series the fill color overlaps the point.
https://codesandbox.io/s/react-chartjs-2-line-chart-example-forked-5ruj86
I having this issue in version 3.6.0.
Raphael
- 1,738
- 2
- 27
- 47
0
votes
0 answers
React-Redux, Chart cant display the values into the Chart
Hello guys I am new in React-Redux and i need help if someone can help me. I try to finish my project and I have stack few days now.
I try to generate numbers every 5 seconds, between 400-3500. I store them inside an array with the time they were…
Antonis Papadakis
- 39
- 5
0
votes
1 answer
react-chartjs: difference between `scales.x`/`xAxes`/`xAxes[]`
I'm using react-chartjs-2 with Typescript.
I'm very confused with the interface of chartjs (perhaps this is due to severe API changes beneath versions and information running around online without clearly stating the version).
What is the difference…
DarkTrick
- 2,447
- 1
- 21
- 39
0
votes
1 answer
How to integrate basic ChartJs customizations when using react-chartjs-2?
I'm trying to integrate this tooltip-based-on-mouse-position customization into a react-js-2 bar chart. I see where to put the new options:
options: {
tooltips: {
mode: 'index',
position: 'cursor',
intersect: false
}
}
in my…
thoroughlyConfused
- 21
- 3
0
votes
1 answer
Getting Error: Cannot read properties of undefined (reading 'map') chartjs
Im kind of new to web dev and stuck at a problem when trying to visualize data using a doughnut chart from chartjs.
useEffect(() => {
const fetchAPI = async() => {
const resp = await…
jun
- 142
- 6