Questions tagged [react-chartjs-2]

452 questions
0
votes
1 answer

Resizable/Expendable box annotation in ChartJs

I am using chartjs-plugin-annotation in chartJs with ReactJs. But in box annotation is there a way how can I resize the box so I can expend the min, max value of the annotation. My option code: ` options: { scales: { y: { …
ppegu
  • 362
  • 2
  • 9
  • 22
0
votes
1 answer

hide xAxes labels from Bar chart with 'react-chartjs-2'

I have built a graph of bar chart with some data. the current result I have is: and what I want is to delete the names below the xAxes in the bar chart. I viewed the react-chartjs-2 documentation and tried to change the options, also viewed…
Guy Cohen
  • 194
  • 1
  • 9
0
votes
1 answer

Title is undefined in react-chart

I am building a covid-19 tracker, but when data is displayed on the graph using react charts title is coming out to be undefined This is my chart code
{data?.length > 0 && (
Makarand
  • 477
  • 1
  • 7
  • 17
0
votes
1 answer

Using large values for y axis in Chart.js

I am trying to make a graph with data on a public company's market cap over time. The numbers are in 12figures. So it seems that when using those numbers the chart.js can't draw a graph. My browser just crashes. I tried dividing the number to be…
0
votes
1 answer

Always Enable Tooltip : Chart JS : V3 : Bubble Chart : react-chartjs-2

I am trying to always enable all the tooltips for Bubble chart using react-charjs-2 plugin I tried various approaches but none of them work with the latest version of the plugin Would appreciate some advice, Thank you! :) I tried the all possible…
0
votes
1 answer

Show the values of each arc on doughtnut chart of chart.js

This is my current doughnut chart and I want to show the values of each arc on the arc itself. This is the configurations of the chart. const genderConfig={ plugins: { title: { display: true, text: "GENDER", font: { …
Albert
  • 19
  • 4
0
votes
1 answer

【React chart.js】How to add multiple data to Radar chart using map function

I'm trying to figure out how to put multiple data to a radar chart using map function. I picked some related codes as down below. class TopPage_Comp extends Component{ constructor(props){ super(props) this.state = { …
takataka
  • 11
  • 4
0
votes
1 answer

In a Stacked Line Chart, is there a way to stack multiple Y-Axes to match each graphed line?

Example of Stacked Y-Axes I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture. When I keep the scales object simple like this: scales: { y: { stacked: true, title: { display: true, …
Bagoette
  • 33
  • 1
  • 3
0
votes
0 answers

Is it possible to hide the hover value displayed on chart in react-chart-js2

I have implemented a pie chart using react-chartjs-2 library. I am facing issue in showing/hiding the tooltip that comes when we hover on the chart. import React, { PropTypes } from 'react'; import {Pie} from 'react-chartjs-2'; class PieChart…
user11415630
0
votes
2 answers

react-chartjs-2 options prop not working as expected

I am using react-chartjs-2 to build a line chart and none of the options that I have specified in the options prop tend to work. Here is my code: import React, { useState, useEffect } from "react"; // import Chart from "chart.js"; import { Line }…
pranshu verma
  • 141
  • 3
  • 15
0
votes
1 answer

React Chartjs 2 display axes above datasets backgroundColor

I have a Line Chart with chart.js and one of the lines has to fill the background delimited with another line. It works well, but how can I do it to see chart axes when the background is filled ?? Here is an example of what I currently have:…
PauCasademont
  • 279
  • 4
  • 18
0
votes
1 answer

in line chart, line is going beyond height when I remove y axis

I am using react-chartjs-2 version 2.7.6. In line chart, if I keep y axis graph line is in limit. I want to remove y axis but when I remove y axis graph line goes above starting point.
0
votes
2 answers

Why are some react-chartjs-2 options being ignored?

I have this simple line chart that I am trying to change the gridlines from their default gray, however the options object appears to be selectively working. Maybe I am missing something basic but I have been fiddling with it for hours and cannot…
Jacob
  • 346
  • 3
  • 13
0
votes
1 answer

CenterText in doughnut in react

centerText: { display: true, text: `${income}`, fontSize : 10 } I'm not able to see center text using about code in option of doughnut chart. Anyone know why? Thank you in advance
0
votes
0 answers

How hooks (plugins) and different phases in chart.js works?

I read the documentation for chart.js plugins & about different phases like render,init,update available here that occurs while chart appears on browser. But yet it is not clear for me how these different phases & hooks works. And which hook to use…