react-chartjs

问题 I am building a scatter plot using chartJS and react-chartjs-2. I am getting time in this format 2020-07-06T09:17:15.424+00:00 for x-axis and simple floats for y-axis. However I would only like to map data on x-axis based on the day of the week and the time. I have written this for data right now. For the data should the x-axis data be a string or a moment object in order to display data on the weekdays? What kind of data do I need to pass to only show where the point stands in a week? export

问题 I am building a scatter plot using chartJS and react-chartjs-2. I am getting time in this format 2020-07-06T09:17:15.424+00:00 for x-axis and simple floats for y-axis. However I would only like to map data on x-axis based on the day of the week and the time. I have written this for data right now. For the data should the x-axis data be a string or a moment object in order to display data on the weekdays? What kind of data do I need to pass to only show where the point stands in a week? export

问题 I'm trying to render a line chart with 24 hours of data (collected every 30 seconds). I can't figure out from the docs how to get it to scale nicely. The docs say: When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale. But I can't get my line chart to scale "comfortably". I'm not sure it's what they mean, but I get far too many data points to render nicely. So I guess I'm looking for a way to drop data points (using chartjs, not hand

问题 I'm trying to render a line chart with 24 hours of data (collected every 30 seconds). I can't figure out from the docs how to get it to scale nicely. The docs say: When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale. But I can't get my line chart to scale "comfortably". I'm not sure it's what they mean, but I get far too many data points to render nicely. So I guess I'm looking for a way to drop data points (using chartjs, not hand

问题 I have the following scenario: x-axes: String date y-axes: Integers 2 data sets When i hover over a particular data point, i want to display the following: Data collected as of 2020-06-02 33,600 33,000 Diff: 600 Here is what i get instead: Data collected as of undefined 33,600 33,000 Diff: NaN Here is my tooltip callbacks code: tooltips: { mode: 'index', intersect: false, callbacks: { title: function(toolTipItem, data) { return "Data points collected as of " + toolTipItem.xLabel; // return

问题 I am having a react-chartjs with material-table integrated, find it in this link: https://codesandbox.io/s/elastic-brook-okkce?file=/src/Dashboard.jsx As you may see that on the click of any bar, a table is populated. The values in that table are fetched from the backend response (I've not written the code for the same here, but it is working in my PC properly). That Material-table takes in the "data" prop having an object("chartData") assigned to that prop that stored the response from the

问题 I need to draw a chart that looks like the one on the picture. How do I do that with chartjs2? Unfortunately, I couldn't find any examples that show how to implement it. 回答1: Did it like this in React for 2 lines: <Line data={{ labels: [100, 200, 300, 150, 250, 400], datasets: [ { label: 'My red line', fill: false, borderColor: 'red', data: [null, null, 2, 0, 3], }, { label: 'My green line', fill: false, borderColor: 'green', data: [2, 4, 2, null, null, null], }, ], }} /> 回答2: First convert

问题 I have a line chart which I'm trying to set a fixed max and min values. I have tried the other suggestions found on SO, but it still doesn't work. My chart keeps re-setting the max and min values depending on the incoming data. Here's my current options that I pass to my Line chart: var options = { responsive: true, animation: false }; I tried those settings too: var options = { scales: { animation: false, yAxes: [{ display: true, ticks: { suggestedMin: -1, suggestedMax: 1 } }] } }; Any idea

问题 I have been racking my brain on this for days now, starting to think its a bug in the chartJS package? When I setup a stacked bar chart, even with a pretty simple options config, I tend to get very slim transparent gaps between the bar data itself. The more data you have in the bar, the more apparent it becomes. I've isolated it completely out of my code (we're using React and react-chartjs-2 , but i=I've recreated it using vanilla ChartJS, latest version). In my example here, I've turned all

问题 I'm making a pie chart and I'm struggling to show the pie chart data value of each slices. As my application is written in React.js, I use react-chartjs-2. I found this solution for chart.js and tried to implement, but it didn't work for react-chartjs-2. How to display pie chart data values of each slice in chart.js How can I add value to each slices? Any help is appreciated. This is a current view of pie chart. According to the advice, I implemented chart.piecelabel.js . It does not work yet