575 questions
1
vote
1
answer
42
views
Custom sorting of bars within x-axis groups
I'm hoping someone has figured out how to properly sort "datasets" within their clusters in a ChartJS Bar chart. Below is an example of a bar chart in ChartJS with multiple "datasets&...
- 11
0
votes
0
answers
42
views
Chartjs is adding values which is not there in data
This is my code
import "chartjs-adapter-moment";
import LoacalLoader from "@components/Loaders/LocalLoader";
import Text from "@components/Text";
import {
CategoryScale,...
0
votes
0
answers
13
views
How to Prevent Default Sorting in Material-UI React Line Chart
<LineChart
xAxis={[
{
// data: selectedTabData.xAxis,
data: [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
// valueFormatter: (...
0
votes
1
answer
48
views
Chartjs using react - create viewport that slides along x axis, where x axis has a hard minimum and maximum
I'm trying to create and control a viewport where you can scroll left or right on a chart in chartjs, but havent been having any luck. I need the min and max X values to be a hard stop on the panning ...
- 19
0
votes
0
answers
64
views
React Chart - Radar/Spider graph customization
I am using react radar chart, but I am unable to customized it, I refer so many stackoverflow content, but no luch,
I need to remove points from graph,
If label size is big, then it cuts from browser,
...
- 181
0
votes
1
answer
110
views
React Chart.js is not rendering lines when state changes
I am using React Chart.js V2 and I am trying to update my chart when the state changes. However it is only rendering the y-labels on the left side and is not drawing the lines. The dataset and label ...
- 49
0
votes
1
answer
62
views
React Google tags tooltip show numbers in western system
import React from "react"; import { Chart } from "react-google-charts"; class BarChart extends React.Component { convertDataToChartData = (data) => { var modified_data = []; if ...
0
votes
1
answer
92
views
Why is there a 1px gap between the background fill and the canvas edge in my Chart.js line chart?
I'm using Chart.js and react-to create a line chart, but I've noticed a small issue with the background fill. The line chart extends to the edges of the canvas as expected, but the background fill ...
- 447
0
votes
1
answer
126
views
React Chart Js 2 , x axes value not my value
i try formatting my x axis value in chart js
myData
const chartData = {
labels: data.map(item => item.toString()),
datasets: [
{
label: '',
...
1
vote
1
answer
164
views
Chart.js - X-axis not displaying dates with timestamps in format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (React chartjs-2)
I'm trying to create a line chart in React using chartjs-2 to visualize timestamps and their corresponding power measurements. My timestamps are in the format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (...
0
votes
1
answer
81
views
how can i show state label in react google geo chart in US region
<Chart
chartEvents={[
{
eventName: "select",
callback: ({ chartWrapper }) => {
const chart = chartWrapper.getChart();
const ...
- 1
2
votes
1
answer
101
views
How do I make the line start at the middle instead of the beginning of the column?
I'm creating a line chart using chartjs (v3) (and react-chartjs to integrate) and I'm having some bad times to customize the line to start at the middle of the first column (and also finishes at the ...
- 77
0
votes
1
answer
32
views
React Chart js breaks labels when zoom
We currently have a zoom rule for small screens. It applies a zoom to 80%.
But this is breaking the Pie Graph from chart.js.
When we are using large screens, which the page zoom is 100%, we can select ...
- 29
2
votes
1
answer
69
views
ChartJS: Grouped Stacked Bar Chart rendering incorrectly
I am trying to use ChartJS to create a grouped stacked bar chart. In my dataset, there are 2 groups: Groups A and Groups B. Groups A are rendered out correctly, but for some reason, Groups B (gray ...
- 6,495
0
votes
0
answers
101
views
How to display the label text when we hover over the labels on X or Y axes?
I am currently working on a React project that is using ChartJS to generate charts based on the data gathered from the database. Recently I found an issue when the labels are too long,the chart will ...
- 1
0
votes
1
answer
101
views
Chartjs react initially hidden LegendItems
how can I set {hidden:true} on all LegendItems? If I set hidden property to true the legend item is only striked-through but the graph is still displayed. Any ideas?
Thank you!
I already tried this:
...
- 11
0
votes
0
answers
165
views
How to make a bar chart in React Js with custom bar component?
I am trying to create a height comparison chart where I want to display the SVG's of kids, men and women based on height instead of bar. But, sometimes, my SVG does not appear completely on the chart ...
2
votes
1
answer
737
views
ChartJS / react-chartjs-2 add horizontal reference line to bar chart
I am creating a barchart with ChartJS / react-chartjs-2.
The barchart is displaying allright, nothing special:
I want to add a horizontal line to display the average of the years totals to see how ...
- 498
1
vote
1
answer
360
views
ChartJS / react-chartjs-2 divide bar in to two data points
I am creating a barchart with ChartJS / react-chartjs-2.
The barchart is displaying allright so far, nothing special:
My data looks like this:
{
Name: "De Regenboog",
...
- 498
0
votes
0
answers
30
views
Plugin Scope Interference in React Chart.js Integration
(https://i.sstatic.net/D98SY.png)
This is the initial view i am having. There will be a pie chart with 2 bar graphs.
(https://i.sstatic.net/hLALK.png)
In the above image when i am toggling the pie ...
0
votes
0
answers
93
views
How to remove another duplicate y axes grid in chart.js when adding yAxes title
Showing you an image to better understand my problem:
the first two image shows the result without yAxes scale configuration
my code without yAxes label configuration:
the result:
Now I want to add ...
- 125
0
votes
0
answers
22
views
Customize react-chartjs-2
My task is to create a chart with the following design using react-chartjs-2:
My current approach:
With options:
scales: {
x: {
ticks: {
maxTicksLimit: 8,
},
...
- 51
0
votes
0
answers
74
views
How to specify the number of labels to appear on the line of a line chart in react-chartjs-2
I have a line chart but I have no idea why a bunch of x,y corods are appearing on the line itself. Below is the code I believe needs to be modified:
datalabels: {
display: true,
...
- 3,708
1
vote
2
answers
228
views
Trouble achieving spacing between stacked bar charts in React with Recharts
I am able to develop the stacked bar chart but I am not sure how to leave a 10px space between two vertical stacked bar charts.
I gave the barGap={8880} and barCategoryGap={100} but still no luck.
...
- 191
0
votes
0
answers
78
views
React will only render a vertical line no matter how i change the data within the X & Y Axis
I'm following along to a Robinhood Clone tutorial on Youtube. On their version they we're able to change the direction of the line. Mine doesn't seem to budge whenever I change any of the data points. ...
3
votes
0
answers
336
views
How can I add a checkbox to a react chartjs Legend?
I would like to add a checkbox next to the Legend to enable/disable the dataset. It seems that all implementation examples I have seen completely overwrite the Legend, but I like it how it is. I ...
- 104
0
votes
0
answers
22
views
Is it possible to put components on x labels using ticks in react-chart-2?
I am trying to make a chart like this with Multitype Chart from react-chartjs-2(^5.2.0). This is a graph that displays the value and count over time.
I want to add only the temperature and percent ...
- 1
0
votes
1
answer
177
views
How can I customize an information bubble in React-chartjs2 when clicking a point?
Using the example from there site for a Line graph, it seems to support base information when hovering a point. Does anyone know how to customize this to using your own information? For example, in ...
- 104
3
votes
1
answer
5k
views
Problem with chartjs and react-chartjs-2 in reactjs
I tried to draw a line chart with temperature data, humidity data and brightness data. I tried to downgrade the version of chartjs and react-chartjs-2 but it doesn't work
Here's my dependencies:
&...
- 51
0
votes
0
answers
70
views
React Chart js, stuck on conditionally rendering a dash or a line between data points
I'm having problems conditionally rendering a dashed/regular line between data points in a scatter chart in react chart js.
Currently I have this code which I am using to test out the functionality :
...
0
votes
0
answers
59
views
Intermittent Chart.js 3.7.1 Graph Distortion on Load
I'm encountering an intermittent rendering issue with Chart.js (version 3.7.1) where the graph occasionally displays with distortions. This problem does not happen consistently; however, when it does, ...
- 11
0
votes
0
answers
74
views
You may need an appropriate loader to handle this file type. plotly react-chart-editor examples custom
https://github.com/plotly/react-chart-editor/tree/master/examples/custom
Error while running locally for the above open source.
Error Screen
(https://i.sstatic.net/eoWbf.png)
Failed to compile.
./...
0
votes
0
answers
24
views
Changing neutral value from 0 to different number. | reract-chartjs-2
I´m trying to implement a Bar Chart with react-chartjs-2 in a web app.
It is possible to make a graph where values above zero head up and values below zero head down.
So far so good. But now i need to ...
2
votes
0
answers
102
views
How can I extend onClick event for Doughnut legend in react-chartjs-2?
I have to extend the onClick implementation for Doughnut labels. The documentation says, that onClick for labels has following functionality by default:
function(e, legendItem, legend) {
const ...
0
votes
1
answer
265
views
How to add icons next to datalabels?
React ChartJS: I'm creating a combined chart that has bars and a line. I want to display an arrow next to the line datalabels: if the value of the datalabel is bigger than the previous value then the ...
- 61
0
votes
1
answer
77
views
Reduce dimension of graph with react-chartjs-2 and chart.js
I'm having a problem. I'm trying to reduce the dimension of a chart (radial or spider, as you want to call it).
As is possible to see from the image here it takes too much space of the page.
I'm ...
- 21
0
votes
0
answers
94
views
How to remove unwanted x and y coordinates from Scatter Chart in react-chart-js2
I wanted to create a Scatter chart with labels on the y-axis and values on the x-axis. I was able to make a little progress, but I have a problem with unwanted x and y coordinates on the chart ...
1
vote
1
answer
723
views
Is it possible to create a brush chart with ChartJS?
Is it possible to create a brush chart as in this example using ChartJS and potentially plugins?
I’ve seen the zoom plugin https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/drag/category....
- 4,088
2
votes
0
answers
148
views
getting typescript annotations error when adding annotations in react for chartjs [closed]
I am able to see the annotations on the graph. but typescript is throwing below error
Type '{ plugins: { annotation?: { annotations: { annotation: { type: string; scaleID: string; borderWidth: number; ...
- 923
0
votes
1
answer
74
views
Line chart thickness to be Independent of the fill styling
I am using react-chartjs-2, Version: ^5.2.0
As you can see from the images, I am trying to apply a gradient fill on a line chart.
But the gradient styling is also applied on the line itself.
Is there ...
- 1,260
1
vote
0
answers
18
views
Reac-ChartJs-2: Is there a way to show another chart on the tooltip by hovering over a line chart graph?
What would be the way to achieve something like the following feature using react-chartjs-2?
Would you recommend other libraries that could achieve the same?
- 145
1
vote
1
answer
539
views
Show annotations for BarGraph using PrimeReact with Chart.js
We use prime react in one of our project, and there was this need where we had to show a bar graph (histogram) in one of the page.
I have made the changes and it shows the graph, but above some bar ...
1
vote
1
answer
117
views
React-chartjs-2: Gap Between Red and Green Colors
I'm using the react-chartjs-2 library to render a single line chart with red and green segments representing different conditions. I've followed the provided documentation and code examples to create ...
- 1,039
1
vote
2
answers
385
views
React Chart.js disabling interactivity for a single dataset
I'm currently working on a web application where I'm using Chart.js to display a line chart with multiple datasets. The chart contains two datasets, with the first dataset containing the main data ...
- 13
0
votes
1
answer
185
views
Chart.js how to align grouped bar chart correctly?
I have a grouped bar chart use case using Chart.js,
On the X axis I have Months,
On the Y axis, I have stacked bars divided by 2 digit Country codes,
For some reason the bars are not getting aligned ...
- 5,914
1
vote
0
answers
58
views
Issue with Tooltip Display in Chart.js Line Chart using react-chartjs-2
I'm attempting to create a line chart using chart.js and react-chartjs-2, but I'm encountering an issue with the tooltip not displaying when hovering over the data points. Strangely, the tooltip does ...
- 707
1
vote
3
answers
70
views
Not able to hide the (indicator) box which is next to the label in Line Graph
If there is no value in graph API response, then graph should not be plotted and also all the legends/label should be hidden
(Multiple y-axis)
When there is no value in y-axis, I am able to hide the ...
- 29
0
votes
1
answer
1k
views
react-chartjs-2 candlestick chart
How can I implement candlestick chart on react-chartjs-2? This is my code:
import "chartjs-chart-financial";
import React from "react";
import { Chart } from "react-chartjs-2&...
- 647
0
votes
1
answer
110
views
Impossible to change tooltip title in react-chart-js-2
I am trying to custom the tooltip popup in char-js and it's not working. I followed the doc and several posts on stackOverflow, but nothing seems to work. If anybody had a solution, I'd be very ...
- 1
0
votes
1
answer
853
views
How to show data correctly in Line Chart using React-Chartjs-2?
I'm using react-chartjs-2 to make some charts, I'm trying to make a line chart where the y-axis is a number and the x-axis is a date. The problem I'm having is that the y-axis data isn't plotting ...
- 311