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

react-chartjs chart renders without colors

I've tried making a radar chart using react-chartjs (https://github.com/reactjs/react-chartjs). It renders, but there are no colors. What am I missing? I pretty much copied a large chunk of the example at…
sutee
  • 12,568
  • 13
  • 49
  • 61
5
votes
2 answers

How to show data values or index labels in ChartJs (Latest Version)

How to show data values or index labels in ChartJs (Latest Version) as in the below image: I am using the ChartJs to display charts in my React Project. Everything is working fine, except this. I found an answer in stackoverflow…
Arun D
  • 2,369
  • 5
  • 27
  • 39
4
votes
1 answer

Cannot set scale type to custom scale in ChartJS

I followed the ChartJS documentation for creating a custom scale: https://www.chartjs.org/docs/master/samples/advanced/derived-axis-type.html First I defined the custom scale as its own class extending the base Scale interface: import { Scale,…
guy
  • 1,021
  • 2
  • 16
  • 40
4
votes
0 answers

Render bars from multiple datasets at full-width when there is no overlapping data in ChartJS

Examples within. For reference, I am using the latest version of ChartJS (3.2.1) and the latest version of react-chartjs-2 (3.0.3). I want to know how to make my bar chart display in a specific way given multiple, varying datasets. I'd like for the…
ActiveModel_Dirty
  • 510
  • 2
  • 12
4
votes
3 answers

React chart : prevent chart's canvas scaling with height and width

I am using Horizontal Bar from react-chart-js (https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/HorizontalBar.js) as below, const data = { label: ["graph"], datasets: [ { label: "A", …
Dy4
  • 687
  • 1
  • 9
  • 20
4
votes
3 answers

react-chartjs-2 vertical line when hovering over chart

I'm trying to create a linechart, using react-chartjs-2, that has a vertical line when hovering over the datapoints in the chart. Like in this picture below: Chart requirements I tried using the chartjs-plugin-annotation plugin, but with mixed…
Grotle
  • 53
  • 1
  • 6
4
votes
2 answers

Type can not be assigned in react-chartjs-2

I am using react and typescript. I get an error with type. How can I solve it? position is of type string. http://www.chartjs.org/docs/latest/configuration/legend.html [React + ts + react-chartjs-2] import React from 'react'; import {Pie} from…
madoka
  • 43
  • 1
  • 4
4
votes
2 answers

How to redirect user when clicking on a Chart element

I am using react-chartJs-2 library to display the charts. Suppose, user clicks on the bar/Doughnut chart section he must be redirected to a specific page. Following is the code I have done for DoughnutChart: ChartDisplay.jsx
Liz.
  • 795
  • 2
  • 13
  • 31
4
votes
1 answer

Keeping scales in sync across multiple graphs or dynamically changing scales

Here's my use case: I have two charts, one on top of the other, as seen here. Ideally, they'd be two datasets in a single chart, but I couldn't come up with a way to start one chart halfway through the other (especially with the streaming delay).…
j0hnm4r5
  • 407
  • 3
  • 17
4
votes
1 answer

React + Chart.js 2.0: How to put a label inside of a doughnut chart?

I am doing data visualizations with react, react-chartjs-2, and chart.js version 2.2.1. There is a possibly related answer to this question here (look for 17.06.16 update), but I'm not sure what Chart.pluginService.register is or whether it is…
Kwhitejr
  • 2,206
  • 5
  • 29
  • 49
3
votes
1 answer

How to have ticks on x axis in 15 min increments on chartJS?

So my current chart has incremental steps of random times. example I would like it so that it is broken up into 15 mins increments (i.e. 12:45, 13:00, 13:15, 13:30...) This is how i currently have the ticks setting: ticks: { color:…
vrtx
  • 33
  • 3
3
votes
2 answers

Dynamically change type with react-chartjs-2 React

I'm using typescript in my project and I'm trying to change the type of chart, for example by button. And the official documentation of react-chartjs-2 declares the type as a const, so typescript doesn't compile it. What I should do and if it is…
SPR1NG
  • 174
  • 1
  • 11
3
votes
1 answer

react-chart-js2 Showing Negative Axis when dataset contains all 0's

I am using react-chart-js2@3.3.0 with chart.js@3.6.2 When my dataset contains all 0s, the y-axis scales from -1 to 1 as such: See Image How do I make it start at 0 regardless? There seems to be a workaround for this: here and here but these…
user31529
  • 43
  • 3
3
votes
3 answers

Using chart js options with react-chartjs-2 and typescript

I am trying to use a plugin with a react-chartjs doughnut chart. In order to use the plugin (https://www.npmjs.com/package/@scottalan/chartjs-plugin-doughnutlabel), I have to pass options to the component. But when I try to pass options, I get a…
Kyle
  • 461
  • 3
  • 13
3
votes
1 answer

Half doughnut in react-chartjs-2

With the corresponding code-sandbox code https://codesandbox.io/s/competent-jepsen-r7n3d?file=/src/Guage.js , I was able to bring up the Doughnut chart. I need some help in making it a semicircle Doughnut and placing text in centre and also inside…
PremKumar
  • 1,282
  • 4
  • 25
  • 43
1 2
3
…
38 39