Remove space between chart js legend and chart - javascript

How do I remove this space between the legend of this chart and the chart it self
If I change the size it just breaks the diagram :(.
JSFiddle: https://jsfiddle.net/ucs8ybLg/14/
image of the space between label and diagram
Code for the diagram
const config = {
type: 'radar',
data: data,
options: {
elements: {
line: {
borderWidth: 2
}
},
scales: {
r: {
suggestedMin: 0,
suggestedMax: 10
}
}
},
};
const data = {
labels: [
'Problemlösung',
'Ausdauer',
'Selbstständigkeit',
'Zuverlässigkeit',
'Reflexionsfähigkeit',
'Teamwork',
'Respektvoller Umgang',
'Pflichtbewusstsein'
],
datasets: [{
label: 'Schüler',
data: [10, 8, 6, 7, 5, 10, 5, 6],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
},
{
label: 'Lehrer',
data: [8, 10, 7, 7, 3, 9, 8, 7],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
};
Thank you very much for the help!


You can explicitly define options.aspectRatio in order to change the width / height ratio of the chart.
options: {
aspectRatio: 1.5,
...
for more information, please consult Configuration Options from the Chart.js documentation

Related

How to convert a bar chart into a triangle shaped chart using Chart JS?

How to convert a bar chart into a triangle shaped chart using Chart JS ?
For eg: Sample Bar Chart : How to convert it into triangles instead of bars ?
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
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
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});

You can use a scatter chart and define individual datasets for each value.
Please take a look at your amended code and see how it works.
const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
const data = [12, 19, 3, 5, 2, 3];
const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '75, 192, 192', '153, 102, 255', '255, 159, 64'];
const datasets = labels.map((l, i) => ({
label: l,
data: [{ x: i + 1 - 0.45, y: 0 }, { x: i + 1, y: data[i] }, { x: i + 1 + 0.45, y: 0 }],
fill: true,
backgroundColor: 'rgba(' + colors[i] + ', 0.2)',
borderColor: 'rgb(' + colors[i] + ')',
showLine: true,
borderWidth: 1,
lineTension: 0,
pointRadius: 0,
pointHitRadius: 0
}));
new Chart('myChart', {
type: 'scatter',
data: {
datasets: datasets
},
options: {
scales: {
y: {
beginAtZero: true
},
x: {
min: 0,
max: labels.length + 1,
ticks: {
callback: (v, i) => labels[i - 1]
},
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>

You will have to implement your own custom chart type to do this since it's not possible by default, you can read here in the documentation how to implement your own chart type: https://www.chartjs.org/docs/master/developers/charts.html

how to display bars in chartjs

I create a chart using chartjs, how do I display the pediactric to be visible horizontally bar?
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Interna", "Pediatric", "Obygn", "Surgical"],
datasets: [{
label: '100% of Votes',
data: [80, 55, 60, 70],
backgroundColor: [
'rgba(150, 99, 132, 0.6)',
'rgba(180, 99, 132, 0.6)',
'rgba(210, 99, 132, 0.6)',
'rgba(240, 99, 132, 0.6)'
],
borderColor: [
'rgba(150, 99, 132, 1)',
'rgba(180, 99, 132, 1)',
'rgba(210, 99, 132, 1)',
'rgba(240, 99, 132, 1)'
],
borderWidth: 2,
hoverBorderWidth: 0
}]
},
options: {

The x-axis scale begins at 55. Since the value of Pediatric is 55 no bar is visible.
Set the following option to have the scale always begin at zero:
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}

Displaying Data on a Pie chart in ChartsJs

I was able to create this doughnut chart that displays data. However, now that I look at it, I would like add the number value of the foods (100,200,300) below, on a second line, instead of having next to the food item itself. Is there a way to do this? I was thinking that since this is a nested array, looping through it may work? Any thoughts?
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
label1: [["Pizza: 100"], ["Hot Dogs: 200"], ["Burgers:300"]],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
title: function(tooltipItem, data, label1, label2) {
return data ['label1'][tooltipItem[0]['index']];
},
label: function(tooltipItem, data) {
return data['datasets'][0]['data'][tooltipItem['index']];
},
afterLabel: function(tooltipItem, data) {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
return '(' + percent + '%)';
}
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
}
});
<div>
<canvas id="myChart" height="100"></canvas>
<div id="chartjs-tooltip">
<table></table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
</script>

How to hide tooltip for selected datasets? - Chart.js v2.8

I have this graph with four datasets. Two that shows count of values and two lines that represent a goal or target for each value. What I want is to group all tooltips while hovering but exclude the two tooltips for the goal lines. How does one do that?
The following code shows some mockup numbers for the data, and the tooltip shows me all the labels.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 1',
data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
fillColor: 'transparent',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 2',
data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
}
]
},
options: {
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I have tried various methods, some that works half way (excludes only one dataset) or with too much extra code and 'blinking' or flickering tooltips while disappearing.

While working on the question I stumbled up on this solution using filter. It is based on a answer to simular question.
filter: function (tooltipItems, data) {
var label = data.datasets[tooltipItems.datasetIndex].label;
if ((label == "Goal 1")||(label == "Goal 2")) {
return false;
} else {
return true;
}
}
Here is the code from my original question including this filter.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 1',
data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
fillColor: 'transparent',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 2',
data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
}
]
},
options: {
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
filter: function(tooltipItems, data) {
var label = data.datasets[tooltipItems.datasetIndex].label;
if ((label == "Goal 1") || (label == "Goal 2")) {
return false;
} else {
return true;
}
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Final version (I hope). Shortly after my answer I stumbled upon this plugin which is exactly what I really was looking for.
https://github.com/chartjs/chartjs-plugin-annotation
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
}
]
},
options: {
responsive: true,
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
drawTime: 'afterDatasetsDraw',
id: 'a-line-1',
scaleID: 'y-axis-0',
value: 48,
endValue: 43,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 2,
label: {
backgroundColor: 'rgba(255,204,0, 0.4)',
fontColor: 'rgba(0, 0, 0, 0.6 )',
fontSize: 12,
enabled: true,
content: 'Goal from 48 to 43',
yAdjust: -18,
xAdjust: 0,
}
},
{
type: 'line',
mode: 'horizontal',
drawTime: 'afterDatasetsDraw',
id: 'a-line-2',
scaleID: 'y-axis-0',
value: 24,
endValue: 21,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 2,
label: {
backgroundColor: 'rgba(255,0,0,0.4)',
fontColor: 'rgba(255, 255, 255 )',
fontSize: 12,
enabled: true,
content: 'Goal from 24 to 21',
yAdjust: 14,
xAdjust: 0,
}
}]
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'interface'
},
ticks: {
beginAtZero: true
}
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<canvas id="myChart"></canvas>

How to make dashed thick lines with dots in ChartJS ? Is it possible?

I try to find in documentation this functionality. I know how to set dotted or dashed line but their combination i cant find.

Dotted line can be drawn by adding this borderDash: [10, 10] property to each dataset in line charts. You can see the below code or fiddle -> http://jsfiddle.net/fcwbjy57/
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
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)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
borderDash: [10, 10],
fill: false
},{
label: '# of Votes1',
data: [17, 9, 13, 9, 20, 13],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
borderDash: [10, 10],
fill: false
},{
label: '# of Votes2',
data: [1, 6, 13, 12, 20, 5],
backgroundColor: 'rgba(255, 206, 86, 0.2)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1,
borderDash: [10, 10],
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});

Categories