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
Related
So I want to render a simple bar graph in my website, I am using react-chartjs-2 for the same but I can't seem to change the default fontsize or even the color of the x label and ylabels. I have gone through the other answers but none of them are working for me. I have been at it for the last 2 hours and I still can't figure out whats the problem.
Here is my code
import React from 'react'
import './model.css'
import {Bar} from 'react-chartjs-2'
function Model() {
const data = {
labels: ['red', 'blue', 'white', 'green'],
datasets: [
{
label: '# of days',
data: [6, 7, 2, 14],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1,
},
],
};
const options= {
legend: {
labels: {
fontColor: "blue",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 18,
stepSize: 1,
beginAtZero: true
}
}],
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 14,
stepSize: 1,
beginAtZero: true
}
}]
}
}
return (
<div className="model-container">
<Bar
data={data}
options={options}
/>
</div>
)
}
export default Model
I would asume you are using v3, in v3 the scales have been reworked in how you write them, you can read all changed in the migration guide, to know for sure where to put the options and how there name is you can just check the documentation itself
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
y: {
ticks: {
color: 'red',
font: {
size: 14,
}
}
},
x: {
ticks: {
color: 'red',
font: {
size: 14
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>
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>
);
}
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
I'm trying to implement a Line chart in my react app. I found this when searching for charts.
https://github.com/reactjs/react-chartjs
I have used this piece of code but it isn't clear how to use chartData and chartOptions
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
}
});
How can i declare the chartData and chartOptions inorder to get my Linechart work?
You need to define chartData and chartOptions as objects in your React Component. A sample chartData will look like
For a line Chart
var chartOptions: {
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - Whether to show a dot for each point
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
}
var chartData = {
labels: [['Sunday', 'Monday'], ['Sunday', 'Tuesday']],
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: false,
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: 30,
data: [[5, 8], [3, 11]]
}
]
}
For a barChart
var chartData = {
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
}]
},
var chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
See the docs here for more information on the object properties:
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!