ChartJS BoxWidth not working - javascript

First, my JSFidle: https://jsfiddle.net/ethernetz/u8yc4tvb/
At the top of the chart, there is a pink box. I want that box to go away. Others have done this by adding
legend: {
labels: {
boxWidth: 0,
}
},
to their code to make the box go away. As you can see, this didn't affect my box at all. What am I doing wrong?

you should move the legend configuration inside the option object Fiddle
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Completion'],
datasets: [{
data: [60, 20],
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0)',
],
borderWidth: 0
}]
},
options: {
responsive: false,
cutoutPercentage: 90,
events: [],
legend: {
labels: {
boxWidth: 0
}
}
}
});

Related

How to remove Label from charts.js

I am using charts.js to create a charts for my website.
I am unable the remove the legend from the chart.
I did not found the solution. This is the first time I am using charts.js library.
code:
const ctx1 = document.getElementById('yearWise').getContext('2d');
const yearWise = new Chart(ctx1, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
legend: 'options',
labels: ['2018-19','2019-20','2020-21','2021-22'],
datasets: [{
data: [90,400,5245,5122],
backgroundColor: [
// 'rgba(255, 99, 132, 0.5)',
'rgba(70, 132, 238, 0.5)',
],
borderColor: [
// 'rgba(255, 99, 132, 1)',
'rgba(70, 132, 238, 1)',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false,
},
responsive: true,
scales: {
y: {
beginAtZero: true,
}
},
plugins: {
title: {
display: true,
text: 'Programs Conducted - Year Wise',
},
datalabels: {
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'rgba(70, 132, 238, 1)'
}
}
},
},
}
});
Thanks in advance.
Here is the documentation
https://www.chartjs.org/docs/latest/configuration/legend.html
you can simply set legend.display to false.
options: {
plugin: {
legend: {
display: false,
}
}
}
You can try it here
https://codesandbox.io/s/wonj2xn23w?file=/src/index.js

ChartJS hover tooltip colors not showing their correct color

I have this chart made with ChartJS. I've gotten it to work so far, but, when adding more data such as 2 lines.. The tooltip looses it's colors. I'm talking about the white boxes to the left of the values:
As you can see theres 2 lines. One for earnings and one for deposits. The deposit is the one at the bottom and the earnings are at the top. Why is the white square white? It should be same as the line?
Here's my code:
Chart:
var ctx = document.getElementById('orders_graph').getContext('2d');
var Order_chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [], // months
datasets: [{
label: 'Fortjenelse',
data: []
}]
},
// Configuration options go here
options:
{
responsive: true,
hover: {
mode: 'index',
intersect: false
},
spanGaps: true,
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem) {
return ' '+tooltipItem.yLabel+' DKK';
}
}
},
layout: {
// padding: { left: 0, right: 0, top: 10, bottom: 30}
},
scales:{
xAxes: [{
display: true //this will remove all the x-axis grid lines
}],
yAxes: [{
display: true, //this will remove all the x-axis grid lines
stacked: false,
ticks: {
beginAtZero: true
},
}],
}
}
});
Passing the data to the chart:
Order_chart.data.labels = order_array_parent_index;
Order_chart.data.datasets = [{
// Fortjenelse med renter
label: 'Profit',
data: order_array_parent,
fill: false,
lineTension: 0,
backgroundColor: [
'rgba(113, 217, 98, 0.2)',
],
borderColor: [
'rgba(113, 217, 98, 1)',
],
},
{
// Deposited amount
label: 'Deposit',
data: order_array_parent_deposits,
fill: false,
lineTension: 0,
backgroundColor: [
'rgba(255, 223, 82, 0.2)',
],
borderColor: [
'rgba(255, 223, 82, 1)',
],
},
]
Order_chart.update();
Any ideas on how to solve this?
Going through the Chart.js documentation, it seems like the tooltip bgColor isn't in an array, but just a color param. Try changing backgroundColor: [ the color ] to backgroundColor: 'rgba(x,x,x,x)' I don't have Chart.js, so I can't test, but I think that'll sort you.

Hiding xAxis labels when using Chart.js

I am using chart.js to create a linegraph from data in a locally hosted mysql DB.
I am able to pull this data and display it as intended, however despite following documentation and advice given else where I am unable to hide the xAxis Labels. The code I am using is below - any help would be much appriacated.
var chardata = {
labels: time,
datasets: [
{
label: "System health",
fill: false,
backgroundColor: "rgba(123, 192, 67, 0.75)",
borderColor: "rgba(123, 192, 67, 1)",
pointHoverBackgroundColor: "rgba(123, 192, 67, 1)",
pointHoverBorderColor: "rgba(123, 192, 67, 1)",
data: health_score
}
]
};
var ctx = $("#mycanvas");
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
};
var LineGraph = new Chart(ctx, options);
Cheers
..
var options = {
type: 'line',
data: chardata,
options: {
scales: {
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
}
};
..

How to make rectangle in chart.js

I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image
Although I am able to make it by drawing two line in this example
var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
afterDraw: function(chart) {
if (typeof chart.config.options.lineAt != 'undefined') {
var lineAt = chart.config.options.lineAt;
var ctxPlugin = chart.chart.ctx;
var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
ctxPlugin.strokeStyle = "green";
ctxPlugin.beginPath();
lineAt = 102;
ctxPlugin.moveTo(xAxe.left, lineAt);
ctxPlugin.lineTo(xAxe.right, lineAt);
ctxPlugin.moveTo(xAxe.left, lineAt-33);
ctxPlugin.lineTo(xAxe.right, lineAt-33);
ctxPlugin.stroke();
}
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
datasets: [{
label: 'Findings',
data: [0,45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
lineAt: 15,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 20,
stepValue: 20,
max: 60,
min: 0
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Please share your suggestion here : http://jsfiddle.net/nikleshraut/ad2fsefe/
There is already a Chart.js plugin exists called chartjs-plugin-annotation, by which you can achieve that much easily.
Using that plugin, you'll need to create a box annotation (rectangle), as such :
options: { //your chart options
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
yScaleID: 'y-axis-0',
yMin: 40,
yMax: 50,
backgroundColor: 'rgba(0, 255, 0, 0.1)'
}]
}
}
note: this is the minimum options required to draw that rectangle,
and you can find more options here.
Here is a working fiddle.

ChartJS: horizontalBar Label Error

I'm with a error on my HorizontalBar Chart. Basically when i mouse hover on some bar, it should show me the Label name and Value of this bar. But in my chart it shows Label and Label, without value.
Here is a pic: https://i.stack.imgur.com/NGNPM.jpg
it should show me : "Top 10 Clientes and 2400 below"
This is totally static code, here is:
var gerarGraficoDeBarrasHorizontal = function (name, labels, components){
var myChart = new Chart(name, {
type: 'horizontalBar',
data: {
labels: labels,
datasets: components
},
options: optionsSemLegenda
});
}
// OBJECT TO CLARIFY THE CHART CREATION
var barrasHorizontal = [{
data: [2500, 5000],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)'],
borderWidth: 1
}];
// CREATE CHART
gerarGraficoDeBarrasHorizontal('topDezClientesxFaturamentoTotal', ["Top 10
Clientes", "Faturamento Total"], barrasHorizontal);
Thanks a lot!!
#Edit #1
var optionsSemLegenda = new Object();
optionsSemLegenda = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
return tooltipItem.yLabel;
}
}
}
}

Categories