Questions tagged [react-chartjs-2]
452 questions
0
votes
1 answer
ChartJS+React: toggle showLine in scatter view doesn't work
I have a simple Scatter plot using ChartJS with React. The scatter plot in general has the ability connecting lines between the single datapoints by setting the option 'showLine' in the datasets. I want to have a button to toggle this option (turn…
don
- 11
- 2
0
votes
0 answers
React ChartJS-2 Bar rchart X axis label with Percentage
How do I put a percentage beside my X axis labels in chart js bar chart. My dataset is an Object with key value of Title and its count.
scales: {
x: {
ticks: {
min: 0,
max: 100,
callback: function(value) {
return…
user3352042
- 131
- 1
- 3
- 16
0
votes
0 answers
React Chart 2 only draw chart with gray background on production build
I am trying to create line chart with react-chart-2 and NextJs, and it seems to work fine on development.
But when I build project, I only got line chart with gray background. It very bad, how can I fix it. Thanks
What I want to get:
What I want to…
vantrong
- 19
- 5
0
votes
2 answers
Chart goes out of the box when resizing screen
enter code hereI am using react-chartjs-2 to implement chart modules. it is not responsive when we reisize screen
I am using Line component from react-chart-js-2
Jasbir Rana
- 259
- 3
- 13
0
votes
0 answers
PieChart lable overlap react-chartjs-2
I am currently working with react-hooks and react-chartjs-2, the pieChart renders well but the labels overlap each other, I have tried many options and I have also checked the documentation, but none worked. Please how do I solve this? or perhaps…
emekaokoli
- 163
- 4
- 11
0
votes
2 answers
react-chartjs-2 hiding axis label
I'm trying to hide yAxis labels. I tried display: false property, but that didn't work.
My code below:
export const options = {
responsive: true,
interaction: { includeInvisible: true, intersect: false },
tooltip: {
backgroundColor:…
patrol
- 1
0
votes
0 answers
react-chartjs-2 Radar Component
My Radar component hasnt ticks:{stepSize} property. Max is 5 and min is 1 but radar go up to 2. And I want it to jump one by one. more space between the triangles
i
nterface LineProps {
options: ChartOptions<"radar">;
data:…
Agustin R
- 47
- 6
0
votes
0 answers
Update line chart value
I have a component called linechart which takes rpm(speed) and time as input.This speed is actually a machine's speed which is comming through websocket whenever it changes.This rpm(speed)value and it's related time also stored in a db.At first I…
sourav singha
- 43
- 5
0
votes
0 answers
How to include data labels in "hover-over" animation of Chart.js component in React?
In my React application I am using react-chartjs-2 as a Chart.js wrapper, and I am using the plugin chartjs-plugin-datalabels to display the respective values (of my dataset) on my chart.
Chart.js provides a beautiful animation when hovering over…
bassman21
- 320
- 2
- 11
0
votes
1 answer
problen in height in react-chart-2
I created a chart and I want the height to be smaller than the width
this is my code
programmer
- 11
- 1
- 5
0
votes
1 answer
How can I check when the Charts from chart.js are fully rendered in React?
I want to display the chart image rather than the chart from react-chartjs-2 and chart.js.
However, the image is never fully rendered at first
export function App() {
const chartRef = useRef(null);
const [chartImg, setChartImg] =…
Saad Bahir
- 159
- 2
- 9
0
votes
1 answer
change map parameter with function -javascript-react
I using chart package for data analystics
Here is my code:
const param = ['Country', 'Device_Model', 'MMA', 'Game'] // other parameters i want to use eg: Game (current)
let arr = []
const handleChangeParam = () => {
for (let i = 0;…
zanthez
- 45
- 6
0
votes
1 answer
react-chartjs-2 Add additional labels
I'm trying to achieve label shown in the picture (number 5). It shows total number on items for each graph. How do I achieve this with react-chartjs-2?
Cience
- 41
- 1
- 1
- 8
0
votes
1 answer
vertical line annotation on horizontal bar in chart js react not showing
I have a horizontal single bar chart showing percentage inside of an ag-grid row, I would like to add a line at a certain percentage to show a target. I am using the annotations plugin which is registered. I have tried several different versions of…
Will Rollason
- 125
- 1
- 1
- 10
0
votes
0 answers
Make part of datalabels bold in ChartJS
I use chartjs for the charts and chartjs-plugin-databels for the data labels within each bar.
I need make value of line bold and leave the first part unchanged.
I try find solution in…
OneIvan
- 11
- 2