Stack Overflow
Stack Overflow

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
1 answer

Hide tooltip when hovering over null-values in chart.js

I am currently using a line-chart with chart.js 3.5.0 and react-chart-js 3.0.4, given two datasets. The first dataset has data in {x,y}-format with null-values for some y. When hovering over those null-values, the tooltip jumps to the start of the…
sinootz
  • 1
0
votes
2 answers

i can't create a line vertically with react annotation

I'm trying to create a line to show today's date with the help of react annotation, but I'm not successful. My line always stays horizontal between the x and y axis. What could I be doing wrong? This is how it looks now. But I want it to appear…
CanUver
  • 1,756
  • 2
  • 6
  • 19
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

warning in chartjs/react-chartjs options assignment if setting type:'time'

I have the following options set: export const options = { responsive: true, scales: { x: { ticks: { maxTicksLimit: 10, autoSkip: true, color: 'white', }, type: 'time', adapters: { …
sev
  • 1,500
  • 17
  • 45
0
votes
1 answer

Chartjs: I only want left and right padding in pie chart

I have a case at work where I want to use a pie chart. For this I use Chart.js (with react-chartjs-2 library as a wrapper). I would like to have padding left and right in the canvas, but for some reason I always get top padding as well in that case,…
tilly
  • 2,229
  • 9
  • 34
  • 64
0
votes
1 answer

ChartJS - Why is the transition on the first dataset bad?

So I have react-datepicker to choose the dates of my data, the data that is returned looks like this: {clicks: 6, date: "2022-05-15", link: "instagram"}, {clicks: 5, date: "2022-05-15", link: "google"}... On load and every change in the datePicker,…
Jovaaa
  • 58
  • 10
0
votes
1 answer

My ChartJS Line needs to click the color legend first before it plots the data

I am using Chart JS to display sensor readings coming from a firebase firestore database. I encountered this weird bug where my chart doesn't plot initially the data >> https://i.stack.imgur.com/qD6Sd.jpg but after I click the color legend twice >>…
Dos
  • 3
  • 2
0
votes
1 answer

How to join two objects in array

I want to filter two objects in datasets array by label with date . I use in react-chartjs-2. I don't know how do i filter. Example : First Object : { "id": 2, "customer_id": 4, "date": "2019-05-15T21:00:00.000Z", "wbc": 15, …
user13439398
0
votes
2 answers

Issue in implementing ChartJS in my new assignment of ReactJS App, please let me know where I am wrong

I want to upload a chart in my react app but when I use this Barchar.jsx component (have used js nothing changed) it is showing following errors in console(are in image.) import React from "react"; import { Bar, Chart } from…
Virendra Sonkaria
  • 11
  • 4
0
votes
3 answers

How does chart updating works within the context of react?

I currently have a Radar chart in chart.js using the react integration. I was suprised to note that, when I updated the data, instead of showing a completely new plot, it just transitioned smoothly from the previous dataset to the new one. What I am…
Stefano Borini
  • 138,652
  • 96
  • 297
  • 431
0
votes
1 answer

ChartJS different border color for legend

I need to set a different border color for the legend than the actual chart; whenever I add border color to the chart data, it gets applied to both legend and chart. And I couldn't find any options for setting different border colors for the legend…
Moni
  • 47
  • 9
0
votes
1 answer

chartJS, how to disable user from clicking on legend names and changing the graph?

This is a react project. I'm running the latest version of all software. I am trying to create a pie chart but when the legend names are clicked, it changes the graph. So far I've tried each of the lines in the legend below. legend: { …
t20e
  • 13
  • 6
0
votes
1 answer

How to extends a Chart and register it

I want to create a custom Doughnut chart with rounded ends like this : https://stackoverflow.com/a/60993320 So I have create the following class : import * as ChartJS from "chart.js"; class DoughnutRoundedController extends…
Rozukai
  • 1
0
votes
1 answer

Chart beginAtZero: true, min:0 and title:'minutes' doesn't work

I want the axis Y from my react-chart starts from 0, I have been trying many solutions, like beginAtZero: true and min:0 but is doesn't work. import React, { Component } from 'react'; // Documentation…
Anna
  • 33
  • 5
0
votes
1 answer

ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1

I am working on the latest version of Chart.js, i.e., v3.7.1. However, I notice that most of the configurations have been changed from those of version 2.x. My problem is that I would like to draw a vertical line everytime there is a mouseover the…
japheth
  • 373
  • 1
  • 10
  • 34
1 2 3
…
38 39