I'm trying to create a percentile chart, ie a chart with some lines corresponding to each percentile. Given a user input, I want to show their mark in the chart with a dot.
So basically, my question is: Is it possible to place a dot in a multiple line chart? If so, how do I do it?
var lineChart = new Chart(myChart2, {
type: 'line',
data: {
labels: ['6', '7', '8', '9', '10', '11'],
datasets: [ {
label: "50th",
data: [20, 22, 28, 26, 25, 26],
borderColor: '#166ab5',
fill: false
}, {
label: "90th",
data: [72, 74, 68, 75, 74, 78],
borderColor: '#00FF00',
fill: false
}, {
label: "10th",
data: [2, 2, 5, 4, 6, 5],
borderColor: '#FF0000',
fill: false
}]
},
options: {
title: {
text: "Percentile",
display: true
},
legend: {
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
}
});
Related
I am trying to create a bar chart with the columns aligned to the left using the PrimeNg p-chart. I started with the stacked graph on http://primefaces.org/primeng/chart/bar.
This is my current graph:
Desired look:
I have tried using categoryPercentage: 0.99, and barPercentage: 1.0 from How to align ChartJS bars to the left?. These didn't create my desired look as they expanded the column to the full width. I want to have smaller width columns and shift them over to the left. Are there any properties that can be used to achieve this effect? Are there any alternatives to ChartJS properties?
this.stackedData =
[{
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '200',
backgroundColor: '#003D79',
data: [
50,
55,
78,
48,
90,
76,
42
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '400',
backgroundColor: '#AC0000',
data: [
21,
4,
24,
75,
37,
65,
34
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '401',
backgroundColor: '#E80000',
data: [
41,
0,
24,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '402',
backgroundColor: '#5C0000',
data: [
41,
52,
0,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: 'Other',
backgroundColor: '#D5D5D5 ',
data: [
]
}];
this.stackedOptions = {
plugins: {
tooltips: {
mode: 'index',
intersect: false
},
legend: {
position: 'bottom',
align: 'end',
labels: {
usePointStyle: 'circle',
}
},
},
scales: {
x: {
stacked: true,
grid: {
display: false
},
ticks: {
maxRotation: -45,
minRotation: -45,
padding: 30,
}
},
y: {
stacked: true,
grid: {
drawBorder: false,
lineWidth: 0.5,
}
}
}
};
I am trying to create a grouped, stacked bar chart in ChartJS. For the below code, all works fine apart from the grouping aspect, it simply stacks all datasets on top of one another.
stackedBarChartData = {
barPercentage: 1.0,
//labels: stackedBarData['skills'],
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
datasets:[
{
label: 'Dataset 1',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#D6E9C6',
stack: 'Stack 0',
},
{
label: 'Dataset 2',
data: [0, 12, 3, 6, 2, 4, 8, 9],
backgroundColor: '#FAEBCC',
stack: 'Stack 0',
},
{
label: 'Dataset 3',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#EBCCD1',
stack: 'Stack 1',
},
]
}
groupedChartOptions = {
type: 'bar',
data: stackedBarChartData,
options: {
scales: {
scaleShowValues: true,
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: options.xLabel
},
ticks: {
autoSkip: false
},
gridLines: { display: false }
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: options.yLabel
},
gridLines: { display: false }
}]
},
title:{
display: true,
text: options.title
}
}
}
return new Chart(chartObject, chartOptions);
The result is as follows:
Any help would be much appreciated.
Your definition uses Chart.js v2 syntax and it seems to work fine if you use the latest version of Chart.js v2 (2.9.4) as shown below.
const stackedBarChartData = {
barPercentage: 1.0,
//labels: stackedBarData['skills'],
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
datasets: [{
label: 'Dataset 1',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#D6E9C6',
stack: 'Stack 0',
},
{
label: 'Dataset 2',
data: [0, 12, 3, 6, 2, 4, 8, 9],
backgroundColor: '#FAEBCC',
stack: 'Stack 0',
},
{
label: 'Dataset 3',
data: [0, 1, 3, 4, 2, 4, 5, 9],
backgroundColor: '#EBCCD1',
stack: 'Stack 1',
},
]
};
const groupedChartOptions = {
type: 'bar',
data: stackedBarChartData,
options: {
scales: {
scaleShowValues: true,
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'A'
},
ticks: {
autoSkip: false
},
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'B'
},
gridLines: {
display: false
}
}]
},
title: {
display: true,
text: 'XYZ'
}
}
};
new Chart('myChart', groupedChartOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="120"></canvas>
The config you are using should work, the reason it not working is likely to be your verry outdated version of Chart.js. I suspect you are still using version 2.4.0. If you upgrade to 2.9.4 it will work
https://jsfiddle.net/Leelenaleee/6h2ey8mu/8/
I have made two charts in chart.js for a school project, one bar and one line and would like to put a title on each chart but it doesn't work, the bars only disappear. Where do i put the title in the code? I would like the titles to be above the two charts.
Here's a jsfiddle of the code to show more details: https://jsfiddle.net/b4d5y01z/1/
let lineConfig = {
type: 'line',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [{
label: 'Miljoner ton',
data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
backgroundColor:"rgba(0,255,0,0.4)",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
barConfig = {
type: 'bar',
data: {
labels: ['Palmolja', "Sojaolja", 'Solrosolja', 'Rapsolja', 'Jordnöt','Annat'],
datasets: [{
label: "Miljoner ton",
data: [32, 22.4, 8, 13.1, 2.2, 19.7],
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
activeType = 'bar', // we'll start with a bar chart.
myChart;
function init(config) {
// create a new chart with the supplied config.
myChart = new Chart(document.getElementById('chart'), config);
}
Replace options with following
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
},
title: {
display: true,
text: 'Custom Chart Title'
}
},
Demo https://jsfiddle.net/wkt0bfxp/
Try This:
let lineConfig = {
type: 'line',
data: {
labels: ['q', 'w', 'e', 'r', 't', 'y'],
datasets: [{
data: [6, 5, 4, 3, 2, 1]
}]
},
options: {
title:{
display: true,
text: "My Second Chart"
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
barConfig = {
type: 'bar',
data: {
labels: ['a', 's', 'd', 'f', 'g', 'h'],
datasets: [{
data: [10, 20, 30, 40, 50, 60]
}]
},
options: {
title:{
display: true,
text: "My First Chart"
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
Try using charty.live,which gives the developers, the leverage to create charts without single line of code.
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 am using Bar chart of Chart.js which is creating unwanted spacing on left and right side. I have tried to remove that by making canvas width and height to 100% as mentioned chartjs-is-there-any-way-to-remove-blank-space-around-pie-charts here. But it's not removing in my case.
I also need to remove horizontal line below the chart. Is there any way to do so?
Here's what i tried:
//Bar Chart
var bar = document.getElementById("bar-canvas");
var barChart = new Chart(bar, {
type: 'bar',
data: {
labels: ["Jackets", "Pants", "Headwear", "Shirts", "Footwear"],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF'
],
borderColor: [
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF',
'#A7E3FF'
],
borderWidth: 1
},
{
label: 'Dataset 2',
data: [20, 19, 10, 52, 2, 13],
backgroundColor: [
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE'
],
borderColor: [
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE',
'#FD99EE'
],
borderWidth: 1
}]
},
responsive: true,
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
color: "rgba(0, 0, 0, 0)"
},
ticks: {
fontColor: '#0071bc'
},
barThickness: 110
}],
yAxes: [{
stacked: true,
gridLines: {
color: "rgba(0, 0, 0, 0)"
},
scaleLabel: {
display: false
},
ticks: {
display: false
}
}
]
}
}
});
<canvas id="bar-canvas"></canvas>
Managed to remove the bottom line, but somehow could not remove the padding, - commented an area, which removes a little bit, but then you lose the ticks (which is obviously bad)
Just adding a fiddle, hope it helps at least somehow!
https://jsfiddle.net/aokzss3c/1/
..xAxes..
ticks: {
display: true, // removing this
fontColor: '#0071bc',
},