How to change the Date Format in Chart.js? - reactjs
I am confused about how to change my Date Format in Chart.js.
I grabbed my data from the MySQL database one of my columns is called "StartD"
[{"RECORD_NO":217,"Cost":4971,"StartD":"5/8/2022"},{"RECORD_NO":216,"Cost":1814,"StartD":"4/8/2022"},{"RECORD_NO":215,"Cost":3335,"StartD":"3/8/2022"},{"RECORD_NO":214,"Cost":1886,"StartD":"2/8/2022"},{"RECORD_NO":213,"Cost":1274,"StartD":"1/8/2022"},{"RECORD_NO":212,"Cost":2238,"StartD":"31/7/2022"},{"RECORD_NO":211,"Cost":1819,"StartD":"30/7/2022"},{"RECORD_NO":210,"Cost":1021,"StartD":"29/7/2022"},{"RECORD_NO":209,"Cost":2564,"StartD":"28/7/2022"},{"RECORD_NO":208,"Cost":4534,"StartD":"27/7/2022"},{"RECORD_NO":207,"Cost":4187,"StartD":"26/7/2022"},{"RECORD_NO":206,"Cost":2337,"StartD":"25/7/2022"},{"RECORD_NO":205,"Cost":4778,"StartD":"24/7/2022"},{"RECORD_NO":204,"Cost":3215,"StartD":"23/7/2022"},{"RECORD_NO":203,"Cost":4469,"StartD":"22/7/2022"},{"RECORD_NO":202,"Cost":1883,"StartD":"21/7/2022"},{"RECORD_NO":201,"Cost":1097,"StartD":"20/7/2022"},{"RECORD_NO":200,"Cost":2918,"StartD":"19/7/2022"},{"RECORD_NO":199,"Cost":4956,"StartD":"18/7/2022"},{"RECORD_NO":198,"Cost":1565,"StartD":"17/7/2022"},{"RECORD_NO":197,"Cost":4425,"StartD":"16/7/2022"},{"RECORD_NO":196,"Cost":2277,"StartD":"15/7/2022"},{"RECORD_NO":195,"Cost":3866,"StartD":"14/7/2022"},{"RECORD_NO":194,"Cost":1546,"StartD":"13/7/2022"},{"RECORD_NO":193,"Cost":563,"StartD":"12/7/2022"},{"RECORD_NO":192,"Cost":576,"StartD":"11/7/2022"},{"RECORD_NO":191,"Cost":731,"StartD":"10/7/2022"},{"RECORD_NO":190,"Cost":2850,"StartD":"9/7/2022"},{"RECORD_NO":189,"Cost":1154,"StartD":"8/7/2022"},{"RECORD_NO":188,"Cost":4447,"StartD":"7/7/2022"},{"RECORD_NO":187,"Cost":3476,"StartD":"6/7/2022"},{"RECORD_NO":186,"Cost":1047,"StartD":"5/7/2022"},{"RECORD_NO":185,"Cost":1049,"StartD":"4/7/2022"},{"RECORD_NO":184,"Cost":1566,"StartD":"3/7/2022"},{"RECORD_NO":183,"Cost":700,"StartD":"2/7/2022"},{"RECORD_NO":182,"Cost":4728,"StartD":"1/7/2022"},{"RECORD_NO":181,"Cost":4549,"StartD":"30/6/2022"},{"RECORD_NO":180,"Cost":1155,"StartD":"29/6/2022"},{"RECORD_NO":179,"Cost":2148,"StartD":"28/6/2022"},{"RECORD_NO":178,"Cost":4934,"StartD":"27/6/2022"},{"RECORD_NO":177,"Cost":4353,"StartD":"26/6/2022"},{"RECORD_NO":176,"Cost":2546,"StartD":"25/6/2022"},{"RECORD_NO":175,"Cost":1239,"StartD":"24/6/2022"},{"RECORD_NO":174,"Cost":1724,"StartD":"23/6/2022"},{"RECORD_NO":173,"Cost":769,"StartD":"22/6/2022"},{"RECORD_NO":172,"Cost":670,"StartD":"21/6/2022"},{"RECORD_NO":171,"Cost":4634,"StartD":"20/6/2022"},{"RECORD_NO":170,"Cost":2742,"StartD":"19/6/2022"},{"RECORD_NO":169,"Cost":4797,"StartD":"18/6/2022"},{"RECORD_NO":168,"Cost":3317,"StartD":"17/6/2022"}]
I put it into my BarChar.js file and it recognized the data.
import React, {
useState,
useEffect
} from 'react'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js'
import {
Bar
} from "react-chartjs-2"
// Radar, Doughnut, Polar, Pie
import axios from 'axios';
ChartJS.register(
CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend
);
function BarChart() {
const [chartData, setChartData] = useState({
datasets: [],
});
const Chart = () => {
let Cost = [];
let No = [];
axios.get("http://localhost:3001/api/TranscationRecord/Cost")
.then(res => {
console.log(res);
for (const dataObj of res.data) {
Cost.push(parseInt(dataObj.Cost));
No.push(parseInt(dataObj.StartD));
}
setChartData({
labels: No,
datasets: [{
label: 'Daily Cost',
data: Cost,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'date',
parser: 'dd/mm/yyyy'
}
},
y: {
beginAtZero: true
}
}
}
}]
});
})
.catch(err => {
console.log(err);
})
}
useEffect(() => {
Chart();
}, []);
return ( <
div className = "App" >
<
h1 > Bar Chart < /h1> <
div >
<
Bar data = {
chartData
}
/> < /
div > <
/div>
)
}
export default BarChart;
The result
It can only present the Day but not the format of "DD/MM"
Is that a way to solve the problem?
Try displayFormats:
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}
}
}
});
Chart.js Time Display Formats
Change your for loop like below
for (const dataObj of res.data) {
Cost.push(parseInt(dataObj.Cost));
const date = new Date(dataObj.StartD);
No.push(date->toLocaleDateString('en-us',{month:"2-digit", day:"2-digit"));
}
I just figure out the answer. Thanks for helping. I take #terinao's code for references.
Changing the code like this can solve the problem.
axios.get("http://localhost:3001/api/TranscationRecord/Cost")
.then(res => {
console.log(res);
for(const dataObj of res.data){
Cost.push(parseInt(dataObj.Cost));
const d = new Date(dataObj.StartD);
No.push(d.toLocaleDateString('en-us',{day:"2-digit",month:"2-digit" }));
}
The result be like:
(I change the colour into blue but they are the same datasets)
The bar chart
The x-axis of your bar chart is currently a category axis instead of a time axis. The reason is that options is misplaced, it should not be defined inside the dataset but follow the top level structure of the Chart.js configuration.
With react-chartjs-2, you would define options as a separate object and provide it as follows:
<Bar data={data} options={options} />
Once this is is corrected, the display format can be defined according to the Chart.js documentation here.
Please also consider that the time scale requires both, a date library and a corresponding adapter to be present.
Related
Uncaught Error: "category" is not a registered scale
I am trying to implement React char but getting this error, I search and follow decumentation but couldn't find the solution.
import React from 'react';
import { Bar } from 'react-chartjs-2';
const BarChart = () => {
return (
<div>
<Bar data={{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}} />
</div>
);
};
export default BarChart;
Change your code to:
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const BarChart = () => { ... your code ... }
As described in https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc you need to register all the components you're going to use.
The above code just registers everything.
Check out the link for all available components you can register.
Chartjs on Reactjs - beginAtZero not working
I have been trying to make this bar chart start from 0, but it doesn't always work - the weird part is that sometimes it works - it begins from 0, but when I refresh the page it begins from some random number or sometimes even from the number on the lowest bar in the bar chart. I added the min:0 hoping this would fix it. I can't get a hold of the issue, what am I doing wrong?
const data = {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: chartData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
const options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min:0
}
}]
}
}
const chartData = [shownTotal, shownNewTotal];
<Chart chartData={data} options={options} key={key} legendPosition="bottom"/>
EDIT: I forgot to add the options code the first time I posted this.
how to show ng-repeat in angular
I have JSON list data from API, it called by
$scope.link = globalVar.folderAPI+"/web/data.php";
$http.get($scope.link).then(function(response){
$scope.listDataitem = response.data.respone;
})
i want to show the data period to chart
this bellow I've wrote, but it still cannot appear, how to make the data display on chart, how can I parse the data to chart script part
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<div ng-repeat=" x in listDataitem "> {{ x.period }} </div>],
datasets: [{
data: [<div ng-repeat="y in listDataitem"> {{ y.sales}} </div>],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153,102,255,0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
You can try redraw your chart every time your API will be called.
$scope.link = globalVar.folderAPI+"/web/data.php";
$http.get($scope.link).then(function(response) {
$scope.listDataitem = response.data.respone;
let myLabels = [];
let myDataset = [];
for(let i = 0; i< $scope.listDitaitem); i++) {
myLabels.push($scope.listDitaitem[i].period);
myDataset.push($scope.listDitaitem[i].sales);
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: myLabels,
datasets: [{
data: myDataset,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153,102,255,0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
})
Calling a helper function and passing in data to chart.js
I created a helper function to work around my chart.js.
First, on my index.html file I put the ff:
<div id="app"></div>
<canvas id="myChart" width="400" height="400"></canvas>
Next, to call chart.js, I created a helper function with the necessary data/arguments on it:
export const chartUI = (labels, data) =>{
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'RATES',
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
};
Now on my component where I need to put my data on I called the function so it can manipulate and display the data:
import React from 'react';
const helper = require('../../../helpers/utils')
const Chart = (props) => {
return(
<div>
{props.info.map(item => {
return <p>{helper.chartUI(item.time, item.rates)}</p>
}) }
</div>
)
};
export default Chart;
When I run this code i did not see any chart on the frontend and also I got this error: Uncaught TypeError: this.ticks.map is not a function The above error occurred in the <Chart> component: TypeError: this.ticks.map is not a function
PS. Here's the the type data I am flowing from my app:
{
"rates": [
{
"time": "2018-04-13T15:45:19.5968204Z",
"asset_id_quote": "$$$",
"rate": 4000000
},
{
"time": "2018-04-13T15:45:41.7725202Z",
"asset_id_quote": "1ST",
"rate": 37714.501225721289835941919668
}
}
Add DataSet Bar Chart - Chart.JS
I´m tryng to make a bar chart in chart.js (using chart.js 2.2.2)
I´m in trouble trying to put new datasets in a chart
How can i put a new Dataset "Vendas" with data: [10,20,30,40,50,60,70]
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Compras",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var ctx = $("#barOrgaoAno").get(0).getContext("2d");
var myBarChart = new Chart(ctx,{
type: "bar",
data: data,
});
I tried two examples i got in the internet but i can´t get neither to work
Exemple 1
barChartDemo.addData([dData()], "dD " + index);
Exemple2
JSFLiddle
var myNewDataset = {
label: "My Second dataset",
fillColor: "rgba(187,205,151,0.5)",
strokeColor: "rgba(187,205,151,0.8)",
highlightFill: "rgba(187,205,151,0.75)",
highlightStroke: "rgba(187,205,151,1)",
data: [48, 40, 19, 86, 27, 90, 28]
}
var bars = []
myNewDataset.data.forEach(function (value, i) {
bars.push(new myBarChart.BarClass({
value: value,
label: myBarChart.datasets[0].bars[i].label,
x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i),
y: myBarChart.scale.endPoint,
width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1),
base: myBarChart.scale.endPoint,
strokeColor: myNewDataset.strokeColor,
fillColor: myNewDataset.fillColor
}))
})
myBarChart.datasets.push({
bars: bars
})
myBarChart.update();
Since you store your chart data in a variable (called data in your code), you can do it with a simple function on a button :
$('button').click(function() {
// You create the new dataset `Vendas` with new data and color to differentiate
var newDataset = {
label: "Vendas",
backgroundColor: 'rgba(99, 255, 132, 0.2)',
borderColor: 'rgba(99, 255, 132, 1)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 60, 70],
}
// You add the newly created dataset to the list of `data`
data.datasets.push(newDataset);
// You update the chart to take into account the new dataset
myBarChart.update();
});
You can see the full code on this jsFiddle and here is its result after a click :
based on tektiv answer only, it didn't work for me. I constructed the newDataSet just like he suggested, but I had a problem while pushing the Data. to fix this, i had to do: data.config.data.datasets.push(newDataSet); instead of: data.datasets.push(newDataSet);