I have a bar chart and I wanted to stacking the yellow bar over the purple and pink bar. Somehow the xAxes of the yellow bar start/end at the left/right corner so it got clipped on each sides. I want it to be at center like at value = 3 on the image below:
here's my code :
var ctx = document.getElementById('myChart');
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [
{
label: 'Total Trip',
yAxisID: 'Total-Trip',
data: [1000, 1350, 1230, 940, 640],
type: 'line',
backgroundColor: ['transparent']
},
{
label: 'Orang',
xAxisID: 'x-B',
yAxisID: 'Orang-y',
data: [50, 46, 44, 46, 49],
backgroundColor: 'rgba(255, 206, 86)',
barThickness: 30,
clip: {
left: 50,
right: 50
}
},
{
label: 'Travel Costs',
xAxisID: 'x-A',
yAxisID: 'Orang-y',
data: [100, 96, 84, 76, 69],
backgroundColor: 'rgba(255, 99, 132)',
},
{
label: 'Travel Costs USD',
xAxisID: 'x-A',
yAxisID: 'Orang-y',
data: [150, 106, 94, 96, 99],
backgroundColor: 'rgba(155, 19, 232)',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
labels: {
render: 'value'
}
},
scales: {
yAxes: [
{
id: 'Total-Trip',
display: false,
type: 'linear',
position: 'right',
ticks: {
min: 0,
}
},
{
id: 'Orang-y',
stacked: false,
ticks: {
beginAtZero: true
},
}
],
xAxes: [
{
id: 'x-A',
},
{
id: 'x-B',
stacked: true,
clip: {
left: 50,
right: 50
}
},
]
}
}
});
or you can see here, please click Show Files and then choose bar-side-to-side.html
https://replit.com/#panjigemilang/html?v=1
I think offset and display properties will help:
{
id: 'x-B',
offset:true,
display:false
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
Transaksi CBT - Non CBT
</h1>
<div class="panel">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<style>
.panel {
height: 400px;
width: 400px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
var ctx = document.getElementById('myChart');
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'Total Trip',
yAxisID: 'Total-Trip',
data: [1000, 1350, 1230, 940, 640],
type: 'line',
backgroundColor: ['transparent']
},
{
label: 'Orang',
xAxisID: 'x-B',
yAxisID: 'Orang-y',
data: [50, 46, 44, 46, 49],
backgroundColor: 'rgba(255, 206, 86)',
barThickness: 30,
},
{
label: 'Travel Costs',
xAxisID: 'x-A',
yAxisID: 'Orang-y',
data: [100, 96, 84, 76, 69],
backgroundColor: 'rgba(255, 99, 132)',
},
{
label: 'Travel Costs USD',
xAxisID: 'x-A',
yAxisID: 'Orang-y',
data: [150, 106, 94, 96, 99],
backgroundColor: 'rgba(155, 19, 232)',
}
]
},
options: {
layout: {
margin: 20
},
responsive: true,
maintainAspectRatio: false,
plugins: {
labels: {
render: 'value'
}
},
scales: {
yAxes: [{
id: 'Total-Trip',
display: false,
type: 'linear',
position: 'right',
ticks: {
beginAtZero: true
}
},
{
id: 'Orang-y',
stacked: false,
ticks: {
beginAtZero: true
}
},
],
xAxes: [{
id: 'x-A',
},
{
id: 'x-B',
offset: true,
display: false
},
]
}
}
});
</script>
</body>
</html>
Related
Hello I have stuck with add space between stacked bar, I mean I need to add space or margin or padding between bar color
this what I'm done with
and what I want is like this
as you can see there's is space between green, red and yellow bar
are possible to add it?
I've trying to add options.layout.padding but still not working
const borderRadius = 8;
const borderRadiusAllCorners = { topLeft: borderRadius, topRight: borderRadius, bottomLeft: borderRadius, bottomRight: borderRadius };
const labels = ['0%', '25%', '50%', '75%', '100%'];
const data = {
labels: labels,
datasets: [
{
label: 'LCP',
data: [
90,80,70
],
borderColor: 'green',
backgroundColor: 'green',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
{
label: 'FID',
data: [
8,15,15
],
borderColor: 'yellow',
backgroundColor: 'yellow',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
{
label: 'CLS',
data: [
2,5,15
],
borderColor: 'red',
backgroundColor: 'red',
borderWidth: 0,
borderRadius: borderRadiusAllCorners,
borderSkipped: 'false',
},
]
};
const ctx = $('#cwv-chart');
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
elements: {
bar: {
borderRadius: 6,
borderWidth: 2,
}
},
scales: {
x: {
display: false,
stacked: true,
offset: true,
},
y: {
display: false,
stacked: true
}
},
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: false,
}
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="cwv-chart" height="150"></canvas>
The options.layout.padding is just adding space around the chart area and not between data elements.
I'm doing something like that with a simple plugin, changing the base of the bar element, at runtime.
EDIT: the plugin has been updated in order to avoid bugs when chart hovering.
See snippet:
const ctx = document.getElementById("myChart");
const plugin = {
id: 'fillGaps',
beforeDatasetDraw(chart, args) {
if (args.index > 0 && chart.isDatasetVisible(args.index)) {
args.meta.data.forEach(function(item, i) {
const {width} = item.getProps(['width'], true);
item.base = item.x - width + 3;
});
}
}
};
const myChart = new Chart(ctx, {
type: 'bar',
plugins: [plugin],
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'user 1 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'rgba(40, 139, 170, 1)',
borderWidth: 0,
borderSkipped: false,
},
{
label: 'user 2 online',
data: [50, 35, 45, 47, 10, 3, 27],
backgroundColor: 'orange',
borderWidth: 0,
borderSkipped: false,
}]
},
options: {
indexAxis: 'y',
//animation: false,
elements: {
bar: {
borderRadius: {
topLeft: 12,
topRight: 12,
bottomLeft: 12,
bottomRight: 12
},
}
},
scales: {
y: {
stacked: true,
},
x: {
stacked: true,
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I want to draw a chart with 4 lines, with filling between 2 specific lines named Max and Min. The library I'm using is Javascript Chartjs.
I have read the chart area doc (https://www.chartjs.org/docs/latest/charts/area.html) and this answer https://stackoverflow.com/a/45398867/10250051
However, the graph still fills the whole area under the Max line instead of stopping at the min line.
$(document).ready(function(){
var ctx = document.getElementById('mixed-api').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3,4,5,6,7],
datasets: [
{
label: 'Median',
data: [20, 20, 20, 20, 20, 20, 20],
fill: false,
borderColor: 'rgb(0, 0, 0)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Min',
data: [10, 10, 10, 10, 10, 10, 10],
fill: false,
borderColor: 'red',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Max',
data: [30, 30, 30, 30, 30, 30, 30],
fill: '-1',
borderColor: 'red',
tension: 0.1,
backgroundColor: 'rgba(255,193,8,0.5)'
},
{
label: 'Random',
data: [5, 10, 15, 20, 25, 30, 35],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Energy (kW)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
pointLabels: {
fontStyle: 'bold',
},
plugins: {
filler: {
propagate: false
}
},
}
}
});
});
Wrong graph
Your code is working fine, only thing I can think of is that you are using an outdated version of the lib, with the latest V2 (2.9.4) release and V3 release its working as intended, see examples:
V2.9.4
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [
{
label: 'Median',
data: [20, 20, 20, 20, 20, 20, 20],
fill: false,
borderColor: 'rgb(0, 0, 0)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Min',
data: [10, 10, 10, 10, 10, 10, 10],
fill: false,
borderColor: 'red',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Max',
data: [30, 30, 30, 30, 30, 30, 30],
fill: '-1',
borderColor: 'red',
tension: 0.1,
backgroundColor: 'rgba(255,193,8,0.5)'
},
{
label: 'Random',
data: [5, 10, 15, 20, 25, 30, 35],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Energy (kW)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
pointLabels: {
fontStyle: 'bold',
},
plugins: {
filler: {
propagate: false
}
},
}
}
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
V3:
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [
{
label: 'Median',
data: [20, 20, 20, 20, 20, 20, 20],
fill: false,
borderColor: 'rgb(0, 0, 0)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Min',
data: [10, 10, 10, 10, 10, 10, 10],
fill: false,
borderColor: 'red',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
},
{
label: 'Max',
data: [30, 30, 30, 30, 30, 30, 30],
fill: '-1',
borderColor: 'red',
tension: 0.1,
backgroundColor: 'rgba(255,193,8,0.5)'
},
{
label: 'Random',
data: [5, 10, 15, 20, 25, 30, 35],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
//backgroundColor: 'rgba(255,193,8,0)'
}
]
},
options: {
scales: {
y: {
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Energy (kW)'
}
},
x: {
scaleLabel: {
display: true,
labelString: 'Time'
}
},
},
pointLabels: {
fontStyle: 'bold',
},
plugins: {
filler: {
propagate: false
}
},
}
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>
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)
}
}
});
I am using chart.js version 2.5.0 and need to know if there any way to hide the empty bars from each group in a grouped stacked bar chart? Some data values in chart datasets can be null.
Here is what I want:
Combo Chart Type (Grouped and Stacked)
var options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
return null;
return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
labels: {
show: true
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines: {
display: false
},
labels: {
show: false
}
}, {
type: "linear",
display: true,
gridLines: {
display: true
},
labels: {
show: true
},
ticks: {
beginAtZero: false,
userCallback: function(value) {
return numeral(value).format('($ 0.0 a)');
}
}
}, {
type: "linear",
display: false,
gridLines: {
display: false
},
labels: {
show: true
}
}, {
type: "linear",
display: false,
gridLines: {
display: false
},
labels: {
show: true
}
}, {
type: "linear",
display: false,
gridLines: {
display: false
},
labels: {
show: true
}
}, {
type: "linear",
display: false,
id: "y-axis-5",
gridLines: {
display: false
},
labels: {
show: true
}
}]
},
legend: {
labels: {
fontSize: 11,
usePointStyle: true,
padding: 15,
filter: (legendItem, chartData) => {
if (legendItem.datasetIndex > 0) return true;
}
}
}
}
var data = {
labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
datasets: [{
type: 'bar',
label: "Opening Balance",
data: [1120000],
fill: true,
backgroundColor: 'rgba(243, 194, 0, .3)',
borderWidth: 1,
borderColor: '#F3C200',
hoverBackgroundColor: '#F3C200',
hoverBorderColor: '#7d6505',
stack: 'OB'
}, {
type: 'bar',
label: "Income",
data: [, 210000, 258900, 475669, 402569],
fill: true,
backgroundColor: 'rgba(42, 180, 192, .3)',
borderWidth: 1,
borderColor: '#166269',
hoverBackgroundColor: '#2ab4c0',
hoverBorderColor: '#2ab4c0',
stack: 'Income'
}, {
type: 'bar',
label: "Income Expected",
data: [, 215000, 320000, 412236, 385569],
fill: true,
backgroundColor: 'rgba(76, 135, 185, .4)',
borderWidth: 1,
borderColor: '#2a587f',
hoverBackgroundColor: '#4c87b9',
hoverBorderColor: '#2a587f',
stack: 'Income'
}, {
type: 'bar',
label: "Expenditures",
data: [, 204560, 256987, 236981, 365587],
fill: true,
backgroundColor: 'rgba(243, 82, 58, .3)',
borderWidth: 1,
borderColor: '#f3523a',
hoverBackgroundColor: '#f56954',
hoverBorderColor: '#f3523a',
stack: 'Expenditures'
}, {
type: 'bar',
label: "Expenditures Expected",
data: [, 269877, 325698, 435887, 423369],
fill: true,
backgroundColor: 'rgba(228, 58, 69, .4)',
borderWidth: 1,
borderColor: '#b32a33',
hoverBackgroundColor: '#e43a45',
hoverBorderColor: '#b32a33',
stack: 'Expenditures'
}, {
label: "Balance",
type: 'bar',
data: [, 54400, 19013, 14569, 24998],
fill: true,
borderColor: '#1ebfae',
backgroundColor: 'rgba(30, 191, 174, .3)',
borderWidth: 1,
hoverBackgroundColor: '#1ebfae',
hoverBorderColor: '#099486',
stack: 'Balance'
}]
};
new Chart(document.getElementById("fundStatus").getContext('2d'), {
type: 'bar',
data: data,
options: options
});
The fiddle: https://jsfiddle.net/q_sabawoon/atLxLg7x/
Please help.
This problem can be solved by defining two separate x-axes as follows:
xAxes: [{
id: 'opening',
display: false
},
{
id: 'quarter',
offset: true,
gridLines: {
offsetGridLines: true
}
}]
Then link the datasets with option xAxisID to their corresponding x-axis:
datasets: [{
label: "Opening Balance",
...
xAxisID: "opening"
}, {
label: "Income",
...
xAxisID: "quarter" // the same for all other datasets
}
...
Please take a look at your amended code and see how it works.
var options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
return null;
return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
}
}
},
scales: {
xAxes: [{
id: 'opening',
display: false
},
{
id: 'quarter',
offset: true,
gridLines: {
offsetGridLines: true
}
}
],
yAxes: [{
ticks: {
beginAtZero: false,
userCallback: function(value) {
return numeral(value).format('($ 0.0 a)');
}
}
}]
},
legend: {
labels: {
fontSize: 11,
usePointStyle: true,
padding: 15,
filter: (legendItem, chartData) => {
if (legendItem.datasetIndex > 0) return true;
}
}
}
}
var data = {
labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
datasets: [{
label: "Opening Balance",
data: [1120000],
backgroundColor: 'rgba(243, 194, 0, .3)',
borderWidth: 1,
borderColor: '#F3C200',
hoverBackgroundColor: '#F3C200',
hoverBorderColor: '#7d6505',
stack: 'OB',
categoryPercentage: 0.6,
xAxisID: "opening"
}, {
label: "Income",
data: [,210000, 258900, 475669, 402569],
backgroundColor: 'rgba(42, 180, 192, .3)',
borderWidth: 1,
borderColor: '#166269',
hoverBackgroundColor: '#2ab4c0',
hoverBorderColor: '#2ab4c0',
stack: 'Income',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Income Expected",
data: [,215000, 320000, 412236, 385569],
backgroundColor: 'rgba(76, 135, 185, .4)',
borderWidth: 1,
borderColor: '#2a587f',
hoverBackgroundColor: '#4c87b9',
hoverBorderColor: '#2a587f',
stack: 'Income',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Expenditures",
data: [,204560, 256987, 236981, 365587],
backgroundColor: 'rgba(243, 82, 58, .3)',
borderWidth: 1,
borderColor: '#f3523a',
hoverBackgroundColor: '#f56954',
hoverBorderColor: '#f3523a',
stack: 'Expenditures',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Expenditures Expected",
data: [,269877, 325698, 435887, 423369],
backgroundColor: 'rgba(228, 58, 69, .4)',
borderWidth: 1,
borderColor: '#b32a33',
hoverBackgroundColor: '#e43a45',
hoverBorderColor: '#b32a33',
stack: 'Expenditures',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Balance",
data: [,54400, 19013, 14569, 24998],
borderColor: '#1ebfae',
backgroundColor: 'rgba(30, 191, 174, .3)',
borderWidth: 1,
hoverBackgroundColor: '#1ebfae',
hoverBorderColor: '#099486',
stack: 'Balance',
categoryPercentage: 1,
xAxisID: "quarter"
}]
};
const chart = new Chart("fundStatus", {
type: 'bar',
data: data,
options: options
});
#fundStatus {
min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="fundStatus"></canvas>
I have created a stacked bar chart and i have to hide first dataset's label and its box in legend which is "Total Line", Is there anyway to hide first or any dataset's label. i have read the documentation there is a filter in options but it didn't work.
Hiding This label
Here is the html and js for chart
var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
datasets: [{
type: 'line',
label: 'Total Line',
data: totalLine,
fill: false,
borderColor: ["#ff7899"],
legend: false,
pointBackgroundColor: "#ff151f",
pointRadius: 8,
pointHoverRadius: 8,
pointHoverBackgroundColor: "#990e14",
pointHoverBorderColor: "#6754d3"
}, {
type: 'bar',
label: 'Neck',
data: neck,
backgroundColor: "#e99449",
hoverBackgroundColor: "#d36d14"
}, {
type: 'bar',
label: 'Arms',
data: arms,
backgroundColor: "#49bae9",
hoverBackgroundColor: "#0789bf"
}, {
type: 'bar',
label: 'Total',
data: total,
backgroundColor: "#6754d3",
hoverBackgroundColor: "#260cbd"
}
]
},
options: {
legend: {
display: true,
labels: {
display: true,
boxWidth: 12,
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false
},
barThickness: 25,
ticks: {
display: true,
fontFamily: "Montserrat",
fontColor: "#2c405a",
fontSize: 12
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
display: false,
stepSize: 10,
min: 0,
max: 150,
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
<div class="girth-measure-chart-inner" style="width: 100%;">
<canvas id="girth-measure-chart" height=""></canvas>
</div>
</div>
Use the filter method under options.
options: {
legend: {
labels: {
filter: function(legendItem, chartData) {
// return true or false based on legendItem's datasetIndex (legendItem.datasetIndex)
}
}
}
}
In your case return false for the first index and true for the rest.
var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
datasets: [{
type: 'line',
label: 'Total Line',
data: totalLine,
fill: false,
borderColor: ["#ff7899"],
legend: false,
pointBackgroundColor: "#ff151f",
pointRadius: 8,
pointHoverRadius: 8,
pointHoverBackgroundColor: "#990e14",
pointHoverBorderColor: "#6754d3"
}, {
type: 'bar',
label: 'Neck',
data: neck,
backgroundColor: "#e99449",
hoverBackgroundColor: "#d36d14"
}, {
type: 'bar',
label: 'Arms',
data: arms,
backgroundColor: "#49bae9",
hoverBackgroundColor: "#0789bf"
}, {
type: 'bar',
label: 'Total',
data: total,
backgroundColor: "#6754d3",
hoverBackgroundColor: "#260cbd"
}
]
},
options: {
legend: {
labels: {
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 0) {
return false;
}
return true;
}
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false
},
barThickness: 25,
ticks: {
display: true,
fontFamily: "Montserrat",
fontColor: "#2c405a",
fontSize: 12
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
display: false,
stepSize: 10,
min: 0,
max: 150,
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
<div class="girth-measure-chart-inner" style="width: 100%;">
<canvas id="girth-measure-chart" height=""></canvas>
</div>
</div>