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'.
Related
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've created a basic line graph using chart.jswith values distributed on time and I would like to add info about events that occurred on the same days.
This is the datasets used:
return {
labels: labels,
datasets: [
{
label: 'Kb',
type: 'line',
backgroundColor: '#2d627c',
data: data,
borderColor: '#79a6bc',
borderWidth: 1,
pointStyle: 'circle',
pointRadius: 0,
pointBorderColor: 'rgb(0, 0, 0)'
},
{
label: 'Events',
type: 'bar',
pointStyle: 'circle',
pointRadius: 10,
backgroundColor: '#f87979',
data: events,
}
]
}
Do you have any suggestions to add info on the day event?
Thanks a lot!
I used chart js to display data but the labels are not applying properly, it applies to single column
my chart code is :
var dates = ['Lonely','Relationship','Anexity','Hurt','Fear'];
var ctxallSelect = document.getElementById('Emotional');
window.allEmotion = new Chart(ctxallSelect, {
type: 'bar',
data: {
labels: dates,
datasets: [{
label: 'Lonely',
backgroundColor: [
'rgb(0, 156, 182)'
],
borderColor: [
'rgb(0, 156, 182)'
],
data:[this.state.Lonely],
fill: false,
}, {
label: 'Relationship',
fill: false,
backgroundColor: [
'rgb(0, 156, 182)'
],
borderColor: [
'rgb(0, 156, 182)'
],
data: [this.state.Relationship],
},
But my chart label appear as below:
Your issue is related to way you are setting your data inside dataset.
I did a live demo for you solving the issue:
https://codesandbox.io/s/boring-banach-lvffs?file=/src/App.js
Data is an array, each position of that array means one column, so you should do like:
datasets: [
{
label: "Lonely",
.....
data: [30]
},
{
label: "Relationship",
.....
data: [0,45]
},
Is it possible to have different bar widths for different datasets? I have a couple datasets in one stack, and another dataset in its own stack. The single dataset should be narrower than the other stack
Example. Here I duplicated the left stack, resulting in it being twice the width of the right stack. This breaks certain effects, including nonzero borders
var data = {
labels: ["1", "2", "3", "4", "5"],
datasets: [
{
label: "d1",
backgroundColor: "rgba(182,127,0,1)",
borderColor: "rgba(117,61,41,1)",
borderWidth: 1,
data: [42, 78, 64, 90, 97],
stack: "s1"
},
{
label: "d2",
backgroundColor: "rgba(71,161,65,1)",
borderColor: "rgba(36,93,56,1)",
borderWidth: 1,
data: [27, 63, 46, 64, 43],
stack: "s1"
},
{
label: "d3",
backgroundColor: "rgba(255,141,106,1)",
borderColor: "rgba(99,60,32,1)",
borderWidth: 1,
data: [18, 50, 23, 83, 35],
stack: "s1"
},
{
label: "d1",
backgroundColor: "rgba(182,127,0,1)",
borderColor: "rgba(117,61,41,1)",
borderWidth: 1,
data: [42, 78, 64, 90, 97],
stack: "s1b"
},
{
label: "d2",
backgroundColor: "rgba(71,161,65,1)",
borderColor: "rgba(36,93,56,1)",
borderWidth: 1,
data: [27, 63, 46, 64, 43],
stack: "s1b"
},
{
label: "d3",
backgroundColor: "rgba(255,141,106,1)",
borderColor: "rgba(99,60,32,1)",
borderWidth: 1,
data: [18, 50, 23, 83, 35],
stack: "s1b"
},
{
label: "d4",
backgroundColor: "rgba(160,160,160,1)",
borderColor: "rgba(60,60,60,1)",
borderWidth: 1,
data: [152, 141, 170, 194, 128],
stack: "s2",
barPercentage: 0.3
}
]
};
var options = {
scales: {
xAxes: [{
categoryPercentage: 0.6,
barPercentage: 1
}]
},
legend: {
display: false
}
};
var barChart = new Chart($("#myChart"), {
type: 'bar',
data: data,
options: options
});
This actually is possible to do in chart.js, but the solution is a bit "hackish". The gist of it is that you can create a 2nd x axis scale and set the barThickness property to a value smaller than your other axis. Then you assign your dataset to this access and finally, set the scale display to false.
You end up with some datasets on 1 axis and another dataset on a different hidden axis. Everything else still works (no breaking effects like you mentioned in your question).
Here is what your options would look like.
var options = {
scales: {
xAxes: [{
categoryPercentage: 0.6,
barPercentage: 1,
}, {
id: 'x-axis-2',
type: 'category',
display: false,
categoryPercentage: 0.6,
barPercentage: 1,
barThickness: 20,
gridLines: {
offsetGridLines: true
}
}],
},
legend: {
display: false
}
};
You have to make sure you add xAxisID: 'x-axis-2' to whichever dataset you want to bind to the new axis.
Here is a codepen example demonstrating all of this.
You can even do this for a horizontal bar chart by changing the scales around. See this codepen example showing this.
The chart.js documentation shows a barThickness attribute available in the options for a chart, but no such option available at the data set level. I think you may be out of luck unless you want to create your own custom chart type.
I am making a chart on a site and I found chart.js to produce a chart from a json-file.
Everything works but the colors... the three chart is three grey colors and I want to spice it up...
What have I missed?
var ctx = document.getElementById('speedchart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ti,
datasets: [{
label: 'Latency',
data: lt,
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(0,255,0,1.0)"
}, {
label: 'Up speed',
data: up,
strokeColor: "rgba(255,0,0,0.4)"
}, {
label: 'Down speed',
data: dw,
strokeColor: "rgba(0,0,255,0.4)"
}]
}
});
Seems like you are mixing chart.js 1.x syntax with chart.js 2.x
Dont think strokeColor is a valid option in chart.js 2.x.
Here is an example of how you can add some color.
[{
label: 'Info',
backgroundColor: "rgba(46, 44, 211, 0.2)",
borderColor: "rgba(46, 44, 211, 0.5)",
data: data
}
https://jsfiddle.net/brqc0tmw/4/
For more options look at the documentation
http://www.chartjs.org/docs/#line-chart-dataset-structure