Add horizontal Line to my chart.js Barchart - javascript

Hi I want to add a horizontal line to my Barchart. This is the Code of my chart:
var singleBarOptions = {
scaleBeginAtZero: true,
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
barShowStroke: true,
barStrokeWidth: 1,
barValueSpacing: 5,
barDatasetSpacing: 1,
responsive: true
};
var singleBarData = {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(0,191,255,0.5)",
strokeColor: "rgba(0,191,255,0.8)",
highlightFill: "rgba(100,149,237,0.75)",
highlightStroke: "rgba(100,149,237,1)",
data: [60, 50, 40, 30, 20, 10, 20]
}
]
};
var ctx = document.getElementById("singleBarOptions").getContext("2d");
var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);
Is there an easy way to draw this line?
It would also be nice if I could change the position of the line later on.
There are solutions here on stackoverflow, but they don't deal with settings.

Yes, use the Annotations plugin:Chart.Annotation.js
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
Result:
Codepen: Chart.js Annotations BarChart
Note: I am using V 2.2.1, your syntax is I believe from a previous version, so I am only using your Data and some options.

Related

ChartJS incorrect plot when plotting multiple line charts in one graph

I am trying to plot multiple line charts on a graph and I have a toggle to disable / enabled some of the plots. I am destroying / updating whenever required but when I see a particular plot separately, I can see a different plot but when its a mixed graph, the line shows a different plot.
Example fiddle : https://jsfiddle.net/njmr15w9/ ( You can try to comment first two plots from the dataset array and you can see how the green plot changes and shows incorrect points, which should not be the case )
labels: [1, 2, 3, 4, 5,6,7,8],
datasets: [
{
label: "Set 1",
data: [10, 20, null, 40, 30,null,20,40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60,null,50,20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
{
label: "Set 2",
data: [40, 50, 30, 30, 20,null,60,40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart($('#demo').get(0), {
type: 'line',
data: chartData,
options: chartOptions
});
I followed your instructions and commented out the first two datasets. The result looks fine to me.
const chartData = {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [
/*
{
label: "Set 1",
data: [10, 20, null, 40, 30, null, 20, 40],
borderColor: "#F00",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(255,0,0, 0.2)"
},
{
label: "Set 2",
data: [60, 40, 10, 50, 60, null, 50, 20],
borderColor: "#00F",
fill: false,
steppedLine: false,
tension: 0.5
},
*/
{
label: "Set 2",
data: [40, 50, 30, 30, 20, null, 60, 40],
borderColor: "#0D0",
fill: false,
steppedLine: false,
tension: 0,
fillBetweenSet: 1,
fillBetweenColor: "rgba(5,5,255, 0.2)"
}
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Demo Fill between lines'
}
};
var chartDemo = new Chart(document.getElementById('demo'), {
type: 'line',
data: chartData,
options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="demo" height="90"></canvas>
UPDATE
The problem lies in the fillBetweenLinesPlugin that simply doesn't work correctly when only one line is drawn. This can easily be fixed by changing the condition in the for loop by adding datasets.length > 1 as follows.
for (var d = 0; datasets.length > 1 && d < datasets.length; d++) {
...
}

Second yAxes values not charting correctly with Chart.js

I've got one data-set values not showing in dual-yAxes charting.
I've got the general Chart.js code working with dual data-sets and dual yAxes. however, one data set is not showing correctly on chart. the "Temp" values range between 66 and 78, but appear to be "off the chart" despite the min/max range values I use.
See my code here on JSFiddle
<div style="width:75%">
<canvas class=".content" id="myChart" ></canvas>
</div>
<Script>
var canvas = document.getElementById('myChart').getContext('2d');
// #ts-ignore
var myChart = new Chart(canvas, {
options: {
scales: {
yAxes: [
{
id: 'SG',
//type: 'linear',
position: 'left',
ticks:
{
min: 1,
max: 1.1
}
},
{
id: 'Temp',
//type: 'linear',
position: 'right',
ticks:
{
min: 32,
max: 100
}
}
]
}
},
type: 'bar', //not really needed, over-ridden below
data: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri'],
datasets: [{
label: 'Gravity',
yAxesID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
//type: 'line',
label: 'Temp F',
yAxesID: 'Temp',
data: [78, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]
}
});
</Script>
Maybe I'm missing something specific to dual-yAxes charting...
There is a spelling mistake replace yAxesID with yAxisID, and the dataset population should look like the below code or you can see the fiddle for your reference -> https://jsfiddle.net/69p7Lsth/1/
datasets: [{
label: 'Gravity',
yAxisID: 'SG',
data: [1.07, 1.045, 1.030, 1.014, 1.012],
backgroundColor: '#ff6384' //red
}, {
label: 'Temp F',
yAxisID: 'Temp',
data: [8, 66, 78, 66, 76],
backgroundColor: '#36a2eb' //blue
}]

Chart JS Re-Animate chart with onclick

I'm getting myself familiar with Chart.js and want to do a simple thing but couldn't. I just want the chart to re-animate when clicking on a button, but couldn't get it to work. I thought by attaching chart.update to the onclick would work, but it didn't. Thanks for help.
http://jsfiddle.net/f7nj80ye/5/
$('#button1').click(function(){
chart.update();
});
You need to destroy it, and create it again :
var ctx = document.getElementById("myChart");
var config = {
type: 'bar',
data: {
labels: ["2014", "2015", "2016"],
datasets: [{
label: 'Group 1',
data: [50, -59, 64],
datalabels:{
anchor: "end",
align: "end",
color:"black",
font:{ size: 14, },
},
backgroundColor: [ '#5bbbbb', '#5bbbbb4', '#5bbbbb' ],
borderWidth: 1
},{
label: 'Group 2',
data: [69, -85, 92],
datalabels:{
anchor: "end",
align: "end",
color:"black",
font:{ size: 14, },
},
backgroundColor: ['#ddd','#ddd','#ddd'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
max:100
}
}]
}
}
};
var chart = new Chart(ctx, config);
(function() { // self calling function replaces document.ready()
//adding event listenr to button
document.querySelector('#button1').addEventListener('click',function(){
chart.destroy();
chart = new Chart(ctx, config);
});
})();
And here is a fiddle : http://jsfiddle.net/f7nj80ye/30/

Multiple bar widths in Chart.js bar chart

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.

how to label axis within radar chart with chart.js

I would like to label the axis within an chart.js radar chart differently. The axis are labeled with numbers from 1 to 5 (see print screen). I would like to have instead of 1 = "No", 2 = "Basic", 3 = "Proficient" etc.
Is that somehow configurable with chart.js in a radar chart, e.g. by using chart.js options?
Thanks in advance
Since you are using Chart.js version 2.1.3, it will be very simple to achieve what you want.
In any chart (including the radar, the one you are using), labels on values are stored in options.scale.ticks.
Then, if you want to edit the way they are displayed, you must use Chart.js callbacks, like this :
var options = {
scale: {
ticks: {
beginAtZero: true,
userCallback: function (value, index, values) {
// Default callback
return value;
}
}
}
}
Edit the return value with what you want.
Here is a jsFiddle, and also a fully working example using a simple array with the labels you want to display :
var ctx = document.getElementById("myChart").getContext("2d");
var notations = {
0: "",
0.5: "",
1: "no",
1.5: "",
2: "basic",
2.5: "",
3: "proficient",
3.5: "",
4: "great",
4.5: "",
5: "outstanding",
}
var data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [3.25, 2.95, 4.5, 4.05, 2.8, 2.75, 2.0]
}, {
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [1.4, 2.4, 2.0, 0.95, 4.8, 1.35, 5.0]
}]
};
var myChart = new Chart(ctx, {
type: "radar",
data: data,
options: {
scale: {
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return notations[value];
}
}
}
}
});
console.log(myChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Categories

Resources