Chartjs Barchart without borders - javascript

I am trying to build a barchart with chartjs where there should be no space between neighbouring bars. The problem i have is that I don't get rid of the borders between the bars:
Bars with borders
This is my config:
new Chart($('#weekly-availabilities-chart'), {
type: 'bar',
data: {
labels: ...,
datasets: [
{
backgroundColor: 'rgba(153, 193, 72, 0.4)',
label: 'label a',
borderWidth: 0,
data: dataset_1
}, {
backgroundColor: 'rgba(13, 39, 73, 0.4)',
label: 'label b',
borderWidth: 0,
data: dataset_2
}
]
},
options: {
scales: {
xAxes: [
{
barPercentage: 1,
categoryPercentage: 1,
gridLines: {
display: false
}
}
],
yAxes: [
{
stacked: true,
gridLines: {
color: 'rgba(0,0,0,0.05)'
},
ticks: {
beginAtZero: true,
max: 40
}
}
]
}
}
});

use borderWidth: 0 in your datasets.
datasets: [
{
backgroundColor: 'rgba(153, 193, 72, 0.4)',
label: 'label a',
data: dataset_1,
borderWidth: 0
}, {
backgroundColor: 'rgba(13, 39, 73, 0.4)',
label: 'label b',
data: dataset_2,
borderWidth: 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

Horizontal line for bar chart

Information:
Chart.js v3.8.2
https://www.chartjs.org
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
label: ' ',
data: [24,20],
backgroundColor: ['rgba(1, 56, 108, 0.6)'],
borderColor: ['rgba(1, 56, 108, 1'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
type: 'linear',
min: 5,
max: 50
}
}
}
});
Example:
enter image description here
I want to draw a line horizontally and show the average value.
you can add a second dataset for the line.
specify the type as 'line' and set fill to false
datasets: [{
type: 'line', // <-- type as line
label: 'avg',
data: [22,22],
fill: false, // <-- fill as false
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
the line dataset should be added first, else it will be behind the bars
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
type: 'line',
label: 'avg',
data: [22,22],
fill: false,
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
beginAtZero: true,
type: 'linear',
ticks: {
min: 5,
max: 50
}
}]
}
}
});
});
<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.3/Chart.bundle.min.js"></script>
<canvas id="esneklik"></canvas>

Chart.js annotation horizontal line on double y-axis graph

I have been looking for the mistakes I may have made in my codes but still, the horizontal line does not appear on my graph somehow. Is it because of my double y-axis graph?
Below is my code for the graph:
var canvas = document.getElementById('chart').getContext("2d");
new Chart(canvas, {
type: 'line',
data: {
labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
datasets: [{
label: 'Temperature',
yAxisID: 'A',
data: [30, 32, 33, 31, 30]
}, {
label: 'Humidity',
yAxisID: 'B',
data: [80, 77, 74, 79, 83],
lineTension: 0.3,
fill: false,
borderColor: 'lightblue',
backgroundColor: 'transparent',
pointBorderColor: 'lightblue',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHoverRadius: 15,
pointHitRadius: 30,
pointBorderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 32,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}
});
And this is the result of my graph:
You've changed the ID of the y-axes to A and B:
yAxes: [{
id: 'A',
...
}, {
id: 'B',
...
In the annotation plugin configuration you tell it to draw on y-axis-0 (which is the default ID):
annotation: {
annotations: [{
scaleID: 'y-axis-0',
...
Change the configuration to whichever y-axis you want to draw the annotation to:
scaleID: 'A'
Edit: Working example with Chart.js 2.7.2
var canvas = document.getElementById('chart').getContext("2d");
new Chart(canvas, {
type: 'line',
data: {
labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
datasets: [{
label: 'Temperature',
yAxisID: 'A',
data: [30, 32, 33, 31, 30]
}, {
label: 'Humidity',
yAxisID: 'B',
data: [80, 77, 74, 79, 83],
lineTension: 0.3,
fill: false,
borderColor: 'lightblue',
backgroundColor: 'transparent',
pointBorderColor: 'lightblue',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHoverRadius: 15,
pointHitRadius: 30,
pointBorderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'A',
value: 32,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart"></canvas>

ChartJS: Set which data to display when chart loads and save (remember) it

I'm using http://www.chartjs.org/ library for charts where I try to display 6 different data points on Y axis.
It's a bit mess when everything is displayed at the same time, but I do not want to split it into multiple charts as all these data correlate.
I wonder if it's possible to set which data should be hidden when the chart loads and then I could show the remaining ones myself.
Also is it possible to save these settings somehow? Let's say I want to display only 3 types of data and after I reload the page it would remember my preference.
EDIT: Here is the current code if it helps..
<canvas id="statsByDayChart" width="400" height="300"></canvas>
<script>
var ctx = document.getElementById('statsByDayChart').getContext('2d');
var profit = {
label: "Profit",
data: {!! json_encode($profit) !!},
borderColor: 'rgba(73, 189, 138, 1)',
borderWidth: 3,
backgroundColor: 'rgba(219, 242, 232, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-profit',
type: 'line'
};
var cost = {
label: "Cost",
data: {!! json_encode($cost) !!},
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 2,
backgroundColor: 'rgba(255, 0, 0, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-cost',
type: 'line'
};
var ctr = {
label: "CTR",
data: {!! json_encode($ctr) !!},
borderColor: 'rgba(255, 126, 0, 1)',
borderWidth: 3,
backgroundColor: 'rgba(255, 126, 0, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-ctr',
type: 'line'
};
var holds = {
label: "Holds",
data: {!! json_encode($holds) !!},
borderColor: 'rgb(175, 26, 245, 1)',
backgroundColor: 'rgb(175, 26, 245, 1)',
borderWidth: 4,
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-holds',
type: 'bar',
fill: true
};
var conversions = {
label: "Conversions",
data: {!! json_encode($conversions) !!},
borderColor: 'rgb(54, 162, 235, 1)',
backgroundColor: 'rgb(54, 162, 235, 1)',
borderWidth: 5,
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-conversions',
type: 'bar',
fill: true
};
var impressions = {
label: "Impressions",
data: {!! json_encode($displays) !!},
borderColor: 'rgba(254, 206, 96, 1)',
backgroundColor: 'rgba(255, 231, 175, 0.8)',
borderWidth: 6,
pointBorderWidth: 4,
borderDash: [20, 6],
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-impressions',
type: 'line',
fill: true
};
var chartData = {
labels: {!! json_encode($days) !!},
datasets: [profit, cost, ctr, holds, conversions, impressions]
};
var lineChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
legend: {display: true},
responsive: true,
maintainAspectRatio: false,
elements: { line: { tension: 0.05 } },
scales: {
xAxes: [{ gridLines: { display: true, offsetGridLines: false }, barPercentage: 1, categoryPercentage: 0.4 }],
yAxes: [
{
id: 'y-axis-profit',
type: 'linear',
gridLines: { display: true },
ticks: { beginAtZero: true, min: {{ $profit->min() }}, max: {{ $profit->max() }} },
display: true
},
{
id: 'y-axis-cost',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $cost->min() }}, max: {{ $cost->max() }} },
display: false
},
{
id: 'y-axis-ctr',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $ctr->min() }}, max: {{ $ctr->max() }} },
display: false
},
{
id: 'y-axis-holds',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $holds->min() }}, max: {{ $holds->max() }} },
display: false,
},
{
id: 'y-axis-conversions',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $conversions->min() }}, max: {{ $conversions->max() }} },
display: false,
},
{
id: 'y-axis-impressions',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $displays->min() }}, max: {{ $displays->max() }} },
display: false
}
]
},
tooltips: { mode: 'index', intersect: false },
hover: { mode: 'nearest', intersect: true },
}
});
</script>

chart.js My DATA doesn't go along with the label,

I'm using chart.js on a project, a canvas on the html.
However, the data i'm inputting there doesn't go along with the label.
The data bars are not following the axes properly. Is there a way to add a padding, to the bar? Or something similar?
I've tried many ways, but can't get it right.
Here is my config:
$(window).on("load", function(){
//Get the context of the Chart canvas element we want to select
var ctx = $("#bar-multi-axis");
// Chart Options
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration:500,
hoverMode: 'label',
stacked: false,
title:{
display:false,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
xAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "bottom",
id: "x-axis-1",
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: true,
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: "bottom",
id: "x-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
}
}]
}
};
// Chart Data
var chartData = {
labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
datasets: [{
label: "Ações",
data: [45],
backgroundColor: "#5175E0",
hoverBackgroundColor: "rgba(81,117,224,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
}, {
label: "Opções",
data: [28],
backgroundColor: "#16D39A",
hoverBackgroundColor: "rgba(22,211,154,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Termo",
data: [-40],
backgroundColor: "#F98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "BM&F",
data: [25],
backgroundColor: "#F00E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Garantias",
data: [-16],
backgroundColor: "#E12E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Tesouro Direto",
data: [10],
backgroundColor: "#E98A76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Financeiro",
data: [-12],
backgroundColor: "#F98A76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "BTC",
data: [50],
backgroundColor: "#F18E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Renda Fixa",
data: [24],
backgroundColor: "#D98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Clubes e fundos",
data: [-24],
backgroundColor: "#A98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
};
var config = {
type: 'horizontalBar',
// Chart Options
options : chartOptions,
data : chartData
};
// Create the chart
var lineChart = new Chart(ctx, config);
});
I suggest to use only one dataset and define specific color for each bar using an array asbackgroundColor property:
datasets: [{
label: "my set",
data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
Check my fiddle: https://jsfiddle.net/beaver71/2hp160zh/
// Chart Options
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration:500,
hoverMode: 'label',
stacked: false,
legend: {display:false,},
title:{
display:false,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
xAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "bottom",
id: "x-axis-1",
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: true,
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: "bottom",
id: "x-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: true,
type: 'category',
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
}
}]
}
};
// Chart Data
var chartData = {
labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
datasets: [{
label: "my set",
data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
};
var config = {
type: 'horizontalBar',
options : chartOptions,
data : chartData
};
var lineChart = new Chart('myChart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="600"></canvas>

Categories