Related
I have a chart.js running, but i really want to add axis names on teh axises, but dont know how.
Could i get some help?
I have tried to figure it out by searching up, but can't find anything that explain it well.
What is am trying to get:
My chart code:
const ctx = document.getElementById('chart').getContext('2d');
window.myChart = new Chart(ctx,{ // having the "myChart" as a window. insted of const was sugested by someone on StackOverflow (makes the const global, i can therefor use it in another function)
type: 'line',
data: {
labels: arrayTheta,
datasets: [{
//label: graphLabels,
data: arrayRangeArray[0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 0,
tension: 0.4 //The line "tension: 0.4" makes the graph a little bit smoother (might remove later)
},
{
//label: graphLabels,
data: arrayRangeArray[1],
backgroundColor: 'blue, 0.2',
borderColor: 'blue',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[2],
backgroundColor: 'pink, 0.2',
borderColor: 'pink',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[3],
backgroundColor: 'orange, 0.2',
borderColor: 'orange',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[4],
backgroundColor: 'yellow, 0.2',
borderColor: 'yellow',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[5],
backgroundColor: 'black, 0.2',
borderColor: 'black',
pointRadius: 0,
tension: 0.4
}],
},
options: {
scales: {
y: {
beginAtZero: true
}
,x: {
display: true,
type: 'linear'
}
}
}
});
It would be awesome if someone could implement it into my code and the send it here.
Thanks in advance!!
This can be done with the following options:
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Y-Axis Label'
}
},
x: {
title: {
display: true,
text: 'X-Axis Label'
}
}
}
}
For further information, consult Scale Title Configuration from the Chart.js documentation.
Please take a look at your amended code and see how it works with static data.
new Chart('chart', {
type: 'line',
data: {
labels: ['A', 'B','C','D','E'],
datasets: [{
label: 'Dataset 1',
data: [8, 7, 5, 6, 2],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 2',
data: [2, 4, 2, 4, 7],
backgroundColor: 'blue, 0.2',
borderColor: 'blue',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 3',
data: [5, 8, 7, 6, 2],
backgroundColor: 'pink, 0.2',
borderColor: 'pink',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 4',
data: [8, 7, 5, 6, 2],
backgroundColor: 'orange, 0.2',
borderColor: 'orange',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 5',
data: [5, 3, 2, 4, 1],
backgroundColor: 'yellow, 0.2',
borderColor: 'yellow',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 6',
data: [5, 6, 2, 8, 7],
backgroundColor: 'black, 0.2',
borderColor: 'black',
pointRadius: 0,
tension: 0.4
}
],
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Y-Axis Label'
}
},
x: {
title: {
display: true,
text: 'X-Axis Label'
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" height="110"></canvas>
I have a chartjs line chart that has multiple lines like that;
I have been trying to add a date-time selector but I am not able to update my chart because I don't get how to reach the datas of my chart. Here is my chart decleration;
var ctx = document.getElementById('canvas');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: time1, time2,
datasets: [
{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
},
{
label: 'Temperature - 2',
data: temp2,
backgroundColor: 'transparent',
borderColor: 'purple',
borderWidth: 3
},
{
label: 'Humidity - 1',
data: hum1,
backgroundColor: 'transparent',
borderColor: 'green',
borderWidth: 3
},
{
label: 'Humidity - 2',
data: hum2,
backgroundColor: 'transparent',
borderColor: 'yellow',
borderWidth: 3
}]
},
options: {
elements: {
line: {
tension: 0
}
},
scales: {
y: {
title: "Temperature/Humidity",
beginAtZero: true,
min: 10,
max: 60
}
}
}
});
time1, time2, temp1, temp2, hum1, hum2 are all array. When I want to update the chart using chart.update() function that I read at its own documentation, as I said I don't get it how to reach to data arrays like temp1, temp2.
Something like myChart.data.datasets.data would not work, making them like json;
{first_data:{
label: 'Temperature - 1',
data: temp1,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 3
}},
Doesn't work also, how can I reach to temp1 for example?
SOLUTION:
Because of my carelessness I had asked a nonsense question. Because of myChart.data.datasets is an object, I am able to reach to temp1 like myChart.data.datasets[0].data, sorry everyone
You will need to target the specific dataset you want to get the data from so to get the data of the Temperature - 1 dataset you will need to target it like this: myChart.data.datasets[0].data
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, options);
console.log(myChart.data.datasets[0].label)
console.log(myChart.data.datasets[0].data)
<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 library in my React application.
I want to implement Bollinger Bands looking like this:
Is it possible and if so how? I have searched through issues of the repository and have not found the answer I am looking for.
If it is not possible what other library could you recommend? I have looked into:
Highcharts
React-charts
react-chartjs-2
React-financial-charts
react-stockcharts
Recharts
Could you direct me to the sources I need to read.
Thanks in advance.
This is not possible in chart.js by default, you can achieve this in 2 ways, you can write a custom inline plugin to draw it on the canvas or you can use 2 extra datasets and filter out the legend
Extra datasets example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'black',
borderColor: 'black'
},
{
label: 'boll 1',
data: [6.6, 9, 4, 7, 0, 2],
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 0,
tension: 0.4,
pointHitRadius: 0
},
{
label: 'boll 2',
data: [7.3, 11.5, 5.9, 9.6, 5, 11],
borderWidth: 1,
pointRadius: 0,
pointHoverRadius: 0,
fill: '-1',
tension: 0.4,
pointHitRadius: 0
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (label, data) => (!label.text.includes("boll"))
}
}
}
}
}
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.2.0/chart.js"></script>
</body>
I am trying to make a chart with multiple lines and bars but they need to start at 0 and it works fine for the bar's but not one the lines.
I tried setting a id for the options setting options in the dataset but nothings works
Here is my code:
<canvas id="barLine" width="400" height="400"></canvas>
#section('js')
#parent
<script>
var ctx = document.getElementById("barLine");
new Chart(ctx, {
type: 'bar',
data: {
labels: ['contacten', 'orders', 'logistiek'],
datasets: [{
label: 'Aantal',
data: [5.3, 5.5, 5.7],
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}, {
label: 'Aantal',
data: [5.7, 6.5, 6],
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}, {
label: 'Aantal',
data: [7.8, 5, 7],
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}, {
label: 'Target 2016',
data: [5.0, 5.0, 5.0],
type: 'line',
fill: false,
pointHitRadius: 10,
pointRadius: 0,
pointStyle: 'rect'
}, {
label: 'Target 2017',
data: [7.5, 7.5, 7.5],
type: 'line',
fill: false,
pointHitRadius: 10,
pointRadius: 0,
pointStyle: 'rect'
}, {
label: 'Target 2018',
data: [7, 7, 7],
type: 'line',
fill: false,
pointHitRadius: 10,
pointRadius: 0,
pointStyle: 'rect',
backgroundColor:'purple',
borderColor:'purple',
beginAtZero:true
}]
},
options: {
scales: {
yAxes: [{
ticks: {
max: 10,
min: 0
},
scaleLabel: {
display: true,
labelString: "Cijfer"
}
}]
}
}
});
</script>
#stop
So it needs to work that the lines (target 2016......) need to start at 0. I can make it work with just a line but with mixed I cannot make it so.
beginAtZero is an attribute of ticks so you need to put it inside ticks, which is part of options:
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero: true
}
}]
}
}
I´m trying to build a stacked bar chart with a marker on top.
how it should look like
.
So I tried to build a bar chart and combine it with a line chart, but that doesn´t work well.
my result so far
.
Is there a way to get a similar result ?
var chartData = {
labels: ["Zukauf", "Produktion"],
datasets: [
{
label: "offene TP",
data: [102, 55],
backgroundColor: "rgba(15,173,25,1)",
hoverBackgroundColor: "rgba(15,173,25,1)"
},{
label: "erledigte TP",
data: [256, 55],
backgroundColor: "rgba(220,111,18,1)",
hoverBackgroundColor: "rgba(220,111,18,1)"
},{
type: "line",
label: "Plan",
data: [425],
backgroundColor: "rgba(255,255,255,0)",
borderColor: "rgba(0,0,0,0.4)",
borderWidth: 2,
hoverBackgroundColor: "rgba(12,128,133,1)"
}
]
};
After few confusing researches in the chartjs documentation I found the perfect solution.
solution picture
var chartData = {
labels: ["Zukauf", "Produktion"],
datasets: [
{
label: "offene TP",
data: [102, 55],
backgroundColor: "rgba(220,111,18,1)",
hoverBackgroundColor: "rgba(220,111,18,1)"
},{
label: "erledigte TP",
data: [256, 55],
backgroundColor: "rgba(15,173,25,1)",
hoverBackgroundColor: "rgba(15,173,25,1)"
},{
label: "Plan",
data: [425, 500],
borderColor: "rgba(0,0,0,1)",
//important settings
//set the width of the line ( or point )
pointRadius: 50,
// don´t show line betrween points
showLine: false,
//change points of line chart to line style ( little bit confusin why it´s named point anyway )
pointStyle: 'line',
//chart type
type: "line",
}
]
};
Only need to change the 'pointStyle' to 'line', the 'pointRadius' for the width of the line and disable 'showLine'.