How to align Chart JS "legend" on right-center - javascript

I am using Chart JS version 2.x. I have prepared a bar chart with chart JS. But I like to align the legend of the chart in right center. Below I am sharing the image.
And the legend position I want.
I have tried it from documentation. In my code
options: {
legend: {
position: 'right'
}
}
Update 1: I am using chart js module in Angular5
Update 2: what I have tried that is https://jsfiddle.net/v4ur38ao/1/

Updated
options: {
plugins: {
legend: {
position: "right",
align: "middle"
}
}
}

use latest version of chart.js : https://www.chartjs.org/dist/master/Chart.min.js for more reference check this documentation and add align:'middle' in your legend it will work's
legend: {
position: "right",
align: "middle"
},
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["APP1", "APP2", "APP3", "APP4", "APP5"],
datasets: [{
data: [25, 61, 47, 45, 30],
label: "Response > 5",
borderColor: "#5151A1",
backgroundColor: "#5151A1"
}, {
data: [22, 38, 53, 17, 55],
label: "Response <= 5",
borderColor: "#408040",
backgroundColor: "#408040"
}]
},
maintainAspectRatio: false,
options: {
responsive: true,
legend: {
position: "right",
align: "middle"
},
scales: {
yAxes: [{
ticks: {
min: 0,
//max: 100,
callback: function(value) {
return value + "%"
}
},
scaleLabel: {
display: true
//labelString: "Percentage"
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="450" width="600"></canvas>
Check your updated fiddle here
If npm install chart.js not working then refer this answer for more details check the chart.js documentation.

Related

Chartjs v3 - Add a glow effect on hover to the arcs of the doughnut

I need to add a glow effect on hover to the doughnut chart I created. An example of the same can be found here - https://nagix.github.io/chartjs-plugin-style/samples/doughnut.html
The above link plugin works only with chart.js V2, but not with chart.js v3.
Does anyone know how can I achieve this?
I have created a doughnut chart using the following code snippet:
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: 'My First Dataset',
data: chartData,
borderWidth: 0,
backgroundColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
},
],
},
options: {
hoverBorderWidth: 2.84,
spacing: 20,
hoverBorderColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
elements: {
arc: {
angle: 360,
borderWidth: 18,
},
},
layout: {
padding: {
left: 15,
right: 15,
top: 10,
bottom: 15,
},
},
responsive: true,
cutout: '90%',
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
},
});

How to display grid lines (without showing label) between each ticks?

I'm using Chart.js 2 (React-chart-js 2) to display a line chart.
Does anyone have any reference to keeping the vertical gridline between each displayed label?
It seems like the vertical gridline only showing on each displayed label.
You can make use of the scriptable options for this, see example that hides every second label, you can adjust it to hide a bigger step if you want.
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
x: {
ticks: {
callback: function(val, index) {
return index % 2 === 0 ? this.getLabelForValue(val) : '';
}
}
}
}
}
}
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.0.0/chart.js"></script>
</body>
You can try using following configuration
var config = {
type: 'line',
showDatapoints: true,
legend: { position: 'top' },
data: data,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Chart Title'
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
},
{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: true, // only want the grid lines for one axis to show up
},
}],
}
}
};

How to set the size of the arc in ChartJS?

I can’t set the arc size for the chart. How to set the size of the arc? Also, I can’t make the animation work, although I took an example from the official documentation :/
Here is my code:
var ctx = document.getElementById('myChart-<%= ChartId %>').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [
11,69,20
],
backgroundColor: [
"#ffb74d",
"#4db6ac",
"#bf360c"
]
}]
},
options: {
tooltips: {
enabled: false
},
plugins: {
labels: {
render: 'percentage',
precision: 2,
showZero: true,
fontSize: 30,
fontColor: ['#2c405a', '#2c405a', 'white'],
fontFamily: "PTSansBold",
}
},
animation: {
duration:5000
}
}
});
According to Config Options, cutoutPercentage defines the percentage of the chart that is cut out of the middle. To also make animation work, place the canvas inside a div and add responsive: true to your options.
options: {
responsive: true,
cutoutPercentage: 30,
...
}
The animations works fine with what you defined in your options.
var myChart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
datasets: [{
data: [
11,69,20
],
backgroundColor: [
"#ffb74d",
"#4db6ac",
"#bf360c"
]
}]
},
options: {
responsive:true,
cutoutPercentage: 60,
tooltips: {
enabled: false
},
plugins: {
labels: {
render: 'percentage',
precision: 2,
showZero: true,
fontSize: 30,
fontColor: ['#2c405a', '#2c405a', 'white'],
fontFamily: "PTSansBold",
}
},
animation: {
duration: 5000
}
}
});
div {
width: 300px;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset.
For example, if you want to change the width of the border there is an option of cutoutPercentage.
options: {
cutoutPercentage: 80,
...
}
Similarly, you can find other options from the official documentation.
https://www.chartjs.org/docs/latest/charts/doughnut.html
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [
11,69,20
],
backgroundColor: [
"#ffb74d",
"#4db6ac",
"#bf360c"
]
}]
},
options: {
cutoutPercentage: 80,
animation: {
duration:5000
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
I hope this helps. Please let me know if you have any doubt.
if anyone looking for fix as per chartJS 3 and year-2022
they have changes some configurations and this will work as follow
options: {
cutout: 80,
...
}

How to rotate a linear graphic in chart.js?

I have generated a linear graph using chart js, but I must show it in a different position than the one shown by default.
I have seen examples of how to rotate the labels generated by the graphic, but this only works for the texts and not for the whole graphic
Currently this is my code to generate the graph
var dataSets = [
dt1 = {
borderColor: "#434EDA",
data: [17.28, 22.58, 27.91, 31.95, 36.32, 41.73, 45.78, 48.55, 53.48, 47.82,],
fill: false,
label: "Dataset1",
pointHitRadius: 5,
pointRadius: 5
},
dt2 = {
borderColor: "#3DE383",
data: [11.83, 20.23, 26.9, 32.39, 36.95, 41.48, 46.41, 48.82, 52.58, 49.42,],
fill: false,
label: "Dataset2",
pointHitRadius: 5,
pointRadius: 5
},
dt3 = {
borderColor: "#ec0000",
data: [14.2, 20.94, 27.36, 32.12, 36.33, 41.4, 46.58, 48.8, 52.69, 48.9,],
fill: false,
label: "Dataset3",
pointHitRadius: 5,
pointRadius: 5
}
]
var grafValues = {
labels: ["0 mts", "1 mts", "2 mts", "3 mts", "4 mts", "5 mts", "6 mts", "7 mts", "8 mts",],
datasets: dataSets,
}
var grafOptions = {
// responsive: true,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Depth"
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperature ° C"
},
}]
},
title: {
display: true,
text: "Graphic 1"
},
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 40,
fontColor: 'black'
}
},
tooltips: {
enabled: true
}
}
var ctx = document.getElementById('chart-zone').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: grafValues,
options: grafOptions
})
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="chart-zone" ></canvas>
</body>
I hope to get a graph rotated as shown in the following image
EDIT
Investigating a little more in the documentation of chart.js I found that there is an option that allows to set the position of the axis to the "right", "left", "top" or "bottom.
Apply these options in this part of the code
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Depth",
},
position: 'left' //X-axis position change
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: "Temperature ° C",
},
position: 'top' //Y-axis position change
}]
But the problem now is that the values has disaooear because the values in the X-axis do not exist. Realize the changes in the code and you will see what I mean.
Thanks for your help and suggestions in advance.
To rotate the entire chart element, as in your image, you can use the CSS rotate transform function:
#chart-zone {
transform: rotate(90deg);
}
Note that the chart might get clipped so you would need to set the bounding size (height/width) of your container appropriately.

How to use canvas inside slideshow (chartjs)

I've been trying to find a working example on how to implement a slideshow that wraps n canvas elements. I attempted to create a very simple slideshow with my canvases based on an example that used list-items with varying backgrounds instead of canvases.
Based on this fiddle I changed the list elements to this:
<div id="slider">
<ul>
<li> <canvas id="programming"> </canvas> </li>
<li> <canvas id="design"> </canvas> </li>
</ul>
</div>
And this is my javascript:
var designBarChartData = {
labels: ["HTML5", "CSS", "jQuery", "JavaScript", "ASP.NET"],
datasets: [{
label: 'Dataset 1',
backgroundColor: ["rgba(255,82,0,1)", "rgba(0,100,255,0.9)", "rgba(255,255,255,0.9)", "rgba(231,131,0, 1)", "rgba(0,122,204,0.8)"],
borderColor: ['rgba(255,39,0,1)', 'rgba(0,20,255, 1)', 'rgba(0,0,0, 1)', 'rgba(232, 90,0, 1)', 'rgba(0,70,204, 1)'],
borderWidth: 3,
yAxisID: "y-axis-1",
data: [40, 30, 50, 40, 30]
}]
};
var langBarChartData = {
labels: ["Core Java", "C/C++", "C#", "Relational-Databases", "VB.NET", "Erlang", "JavaScript"],
datasets: [{
label: 'Programming',
backgroundColor: ["rgba(102,61,0,0.9)", "rgba(5,32,74,0.9)", "rgba(176,0,255,0.8)", "rgba(101,0,0,0.8)", "rgba(0,115,255,0.8)", "rgba(146,0,0,0.9)", "rgba(236,211,0,0.8)"],
yAxisID: "y-axis-1",
data: [40, 30, 50, 40, 60, 20, 30]
}]
};
window.onload = function() {
var ctx = document.getElementById("design").getContext("2d");
window.myBar1 = Chart.Bar(ctx, {
data: designBarChartData,
options: {
responsive: true,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title:{
display:true,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",
ticks: {
max: 100,
min: 0
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
}
}
});
};
window.onload = function() {
var ctx = document.getElementById("programming").getContext("2d");
window.myBar1 = Chart.Bar(ctx, {
data: langBarChartData,
options: {
responsive: true,
hoverMode: 'label',
hoverAnimationDuration: 400,
stacked: false,
title:{
display:true,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "left",
id: "y-axis-1",
ticks: {
max: 100,
min: 0
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
}
}
});
};
Chart.defaults.global.legend.display = false;
It seems most examples cover slideshows of images, whereas in my case I want to create a slideshow of charts (chartjs - which uses a canvas to draw the chart on).

Categories