I am using react-chartjs, and now I am having a problem that my chart is not rendered with no error at all in my console.
Previously, when I installed the react-chartjs and the chartjs there was always error Unmet peer dependency: eslint-plugin-jsx-a11y#3.0.2. Although I am not sure if that is related.
Here is my presentation component:
import React, { PropTypes } from 'react';
import Chart from 'chart.js';
import { Line as LineChart } from 'react-chartjs';
const StatsGraph = (props) =>
<div>
<LineChart data={props.helpsPosted} redraw width="600" height="250" />
</div>;
StatsGraph.propTypes = {
helpsPosted: PropTypes.object.isRequired,
};
export default StatsGraph;
and here is my helpsPosted props:
const helpsPosted = {
chartData: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
datasets: [
{
label: "Helps posted",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 40, 0, 21, 10, 0],
spanGaps: false,
},
],
},
};
Any help would be appreciated. Thanks!
Related
I am using chart.js in React to create Line charts. I have to show data of the 10 days, 6 months and 1 year. For the days I have different labels and data, for the months I have different labels and data and so on. How do I replace this whole canvas with the plot for other data?
My Github repository: https://github.com/weronikamichalczewska/kursy-walut
API documentation: https://api.nbp.pl/en.html
There is also a 'problem' with api for showing 10 days I am using this address now: http://api.nbp.pl/api/exchangerates/rates/a/usd/last/10/?format=json
But to show data from the last year you have to use:
https://api.nbp.pl/api/exchangerates/rates/a/usd/2021-08-26/2022-08-27/?format=json
Anyone have any ideas on how to solve this?
Please help I'm beginner. Here is my code.
import axios from 'axios';
import { useParams } from 'react-router-dom';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
const rate = axios.create({
baseURL: 'http://api.nbp.pl/api/exchangerates/rates/a/',
});
const Chart = () => {
const [post, setPost] = useState();
const { id } = useParams();
useEffect(() => {
async function getPost() {
const response = await rate.get(`/${id}/last/10/?format=json`);
setPost(response.data);
}
getPost();
}, [id]);
const label = ['10 days', '6 months', '1 year'];
const data = {
type: 'line',
labels: post?.rates?.map((x) => {
const date = new Date(x.effectiveDate);
return new Intl.DateTimeFormat('pl', {
month: 'short',
day: 'numeric',
}).format(date);
}),
datasets: [
{
label: label[0],
data: post?.rates?.map((y) => y.mid),
lineTension: 0.1,
backgroundColor: 'rgba(15, 174, 150)',
borderColor: 'rgba(15, 174, 150)',
gridLines: 'false',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(15, 174, 150)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(15, 174, 150)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
{
label: label[1],
data: post?.rates?.map((y) => y.mid),
lineTension: 0.1,
backgroundColor: 'rgba(15, 174, 150)',
borderColor: 'rgba(15, 174, 150)',
gridLines: 'false',
borderCapStyle: 'butt',
hidden: 'true',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(15, 174, 150)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(15, 174, 150)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
},
],
options: {
responsive: true,
},
};
return (
<div
style={{
width: '800px',
height: '800px',
margin: '0px auto',
paddingTop: '500px',
}}
>
<Line data={data} />
</div>
);
};
export default Chart;
I was trying to create below given bar chart image using react-chartjs-2 But unable to do that and also tried with concept of stacked bar chart but nothing worked out. If anyone know this. Please let me know
Here is image for reference.
https://i.stack.imgur.com/Nptki.png
Thanks!
import React, { Component } from "react";
import { HorizontalBar } from "react-chartjs-2";
const dataHorBar = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [70, 60, 50, 40, 30, 20, 10]
},
{
backgroundColor: "grey",
borderColor: "grey",
borderWidth: 1,
data: [70, 70, 70, 70, 70, 70, 70]
}
]
};
const options = {
legend: {
display: false
},
scales: {
yAxes: [
{
id: "yAxis1",
stacked: true,
ticks: {
fontSize: 11,
fontColor: "black"
},
gridLines: {
drawOnChartArea: false // only want the grid lines for one axis to show up
}
}
],
xAxes: [
{
stacked: false,
ticks: {
fontSize: 7,
fontColor: "black",
beginAtZero: true
},
gridLines: {
drawOnChartArea: false
}
}
]
}
};
export default class Button extends Component {
render() {
return (
<div>
<HorizontalBar data={dataHorBar} options={options} />
</div>
);
}
}
I am using chart js and I have made a line chart. I have tried multiple ways and went through the whole documentation but I cannot find the way to do this.
I have tried using the gradient to bring some whitespace between the chart-area-background and line.
Do I need to make a plugin for this small requirement? I need a margin or whitespace between the line and the chart area background.
function App() {
var options = {
// layout: {
// padding: {
// left: 50,
// right: 0,
// // top: 100,
// bottom: 100
// }
// },
scales: {
xAxes: [
{
gridLines: {
drawOnChartArea: false,
drawBorder: false
},
ticks: {
display: false
}
}
],
yAxes: [
{
gridLines: {
drawOnChartArea: false,
drawBorder: false
},
ticks: {
display: false
}
}
]
},
maintainAspectRatio: false,
};
const data = canvas => {
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 49, 0, 500);
// gradient.addColorStop(0.6, "white");
gradient.addColorStop(0.21, "rgba(226,240,251,1)");
gradient.addColorStop(0.54, "rgba(244,249,253,1)");
gradient.addColorStop(0.8, "rgba(251,253,254,1)");
return {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
lineTension: 0.5,
fill:true,
backgroundColor: gradient,
borderColor: "#347aeb",
borderCapStyle: "butt",
borderDash: [],
borderWidth: 5,
borderDashOffset: 0.0,
borderJoinStyle: "round",
pointBorderColor: "#347AEB",
pointBackgroundColor: "white",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "white",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 10,
pointHitRadius: 10,
// showLine: 0,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
};
return (
<Line data={data} width={100} height={400} options={options}></Line>
);
}
Pass array data (dynamically) to chart.js using laravel, this "data: [65, 59, 80, 0, 56, 55, 40],"which holds numbers should contain info from database.
<canvas id="myChart" width="400" height="250"></canvas>
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}
]
};
function adddata(){
myLineChart.data.datasets[0].data[7] = 60;
myLineChart.data.labels[7] = "Newly Added";
myLineChart.update();
}
var option = {
showLines: true
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});
I am testing the data from database and l know that my array contains data but when it comes to show in chart.js is blank
I have implemented a react-chart using the help of the following doc
http://www.chartjs.org/docs/latest/charts/line.html
I have implemented it successfully but this doc not show how to set a maximum value for the y axis. I want to set the max y axis for 100. But because my dataset does not exceed any value over 19, the max y axis is set at 20.
How can i set the max y axis value for 100 even though my data does not exceed 19.?
My code
class LineCharts extends Component {
constructor() {
super();
}
render() {
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
color: "#4D5360",
highlight: "#616774",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
label: 'Current lag',
fill: true,
lineTension: 0.1,
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
scaleOverride: true,
scaleStartValue: 0,
scaleStepWidth: 1,
scaleSteps: 5,
data: [12, 19, 3, 5, 2, 3, 4, 7, 9, 3, 12, 19],
},
],
}
var chartOptions = {
showScale: true,
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
},
}
return (
<LineChart data={chartData} options={chartOptions} width="600" height="250"/>
);
}
}
export default LineCharts;
You can try this:
var chartOptions = {
showScale: true,
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 100
}
}]
}
}
Docs