Questions tagged [react-chartjs-2]
452 questions
2
votes
0 answers
How to customize chart.js tooltip (react-chartjs-2)?
I need to create a customized external tooltip for my project.
This is how it looks like now >>
2nd image is how it should look like >>
My dataset:
datasets: [
//Systolic Avarage Line --------
{
label: 'Systolic Avarage Line',
…
Oğuzhan Yıldırım
- 146
- 2
- 12
2
votes
0 answers
react chartjs 2 - Pie chart - Outlabels getting cropped
Please find below screenshot for Pie chart. Please ignore black strips. If you see at the top, the labels are getting cut. I tried to add some space at the top but still these values are getting cropped. Can anyone suggests how can the chart gets…
Sanjay Adsure
- 35
- 3
2
votes
1 answer
React Chart JS 2: fill in with custom style for the remaining gap for the bar chart
I am building a React JS application. In my application, I need to display data in Bar chart. I am using this library, https://www.npmjs.com/package/react-chartjs-2. Now, I have a chart like this.
This is the code for that
const colorCode =…
Wai Yan Hein
- 13,651
- 35
- 180
- 372
2
votes
2 answers
Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
I'm trying to duplicate the X axis ticks on both sides of the chart (Bottom and Top).
I have seen older questions of this asked but this was during chartjs 2.x -- They have changed the scale section of the options since then. You used to be able to…
intrepiddrain
- 21
- 3
2
votes
1 answer
Chart.js - Increase space between y Axes and the first column bar
I am trying to give space between the first represented data bar and the yAxes.
Working example:
https://codesandbox.io/s/gracious-breeze-sc4zb?file=/src/App.js
Expected behaviour: (trying to add padding where the red is)
Matteobikk90
- 185
- 1
- 14
2
votes
1 answer
React JS Chart JS 2 is not hiding the grid lines in the background
I am building a web application using React JS. My application needs to display some chart widgets on the dashboard. I am using React JS Chart 2 Package, https://www.npmjs.com/package/react-chartjs-2. I can display the chart but there is a problem…
Wai Yan Hein
- 13,651
- 35
- 180
- 372
2
votes
0 answers
react-chartjs-2 Charts ignoring size defined
I'm using react-chartjs-2 to create charts, but recently for an unknown reason they aren't adhering to the dimensions that I've assigned to them.
Jobs Done Per Day
…
Omari Lawrence
- 35
- 1
- 6
2
votes
1 answer
How to change React chartjs-2 legend click functionality to hide all except the one clicked?
React Chartjs-2 : How can I implement the functionality where when a legend is clicked, instead of hiding the clicked legend, all other legends/datasets get hidden?
Hardik Aswal
- 227
- 3
- 15
2
votes
1 answer
ChartJS - Moving vertical line is display on top of tooltip
Hello,
I've followed this post (Moving vertical line when hovering over the chart using chart.js) to draw a vertical line on my chart.
With a single dataset, it's working just fine.
But for a multiple datasets display (with stacked options on the…
Cuong Nguyen
- 407
- 4
- 7
2
votes
1 answer
How to get a Packed circle chart in react chartjs?
I want to introduce a Packed circle chart (a variation of bubble chart which contains only the radius as its dimension). React Chartjs and even Chartjs support only Bubble chart but not Packed circle chart. Here is an example of the expected chart I…
Souvik Ray
- 2,899
- 5
- 38
- 70
2
votes
1 answer
chartjs-plugin-zoom not working with my React project
I have a react component using the 'react-chartjs-2' library to show some data.
The chart with the data works fine. What I cannot do is make the chart work with the 'chartjs-plugin-zoom' plugin. I am not sure what is wrong with the config.
I am…
matiasdiezcanseco
- 31
- 1
- 4
2
votes
1 answer
Can't resolve 'chart.js/auto'
I am trying to use chart-js and react-chartjs-2 but is showing following error:
Failed to compile.
./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js/auto' in…
Ravishankar Chatterjee
- 63
- 1
- 5
2
votes
1 answer
How to print react-chartjs-2 bar chart in browser using functional component?
Here is an example of Bar Chart. I want to print this bar chart in browser, for that i tried react-to-print but it is throwing error like react-to-print only works with class components.
import React from "react";
import { Bar } from…
kritiverma
- 61
- 2
- 7
2
votes
1 answer
Property 'type' is missing in type .but required in type 'Props'
I am getting this weird typescript error in IDE on line 16 (
Mythpills
- 143
- 1
- 2
- 11
2
votes
2 answers
Align Title Left React Chart.js V2
I'm trying to align the title to the left instead of the center (shown in the image).
I know this is possible on chartJS v3.0.0-alpha.2, but reactchartjs only goes up to 2.9.30 as far as I know.
Does anyone know how to achieve this in…
LukeVenter
- 439
- 6
- 20