I'm trying to achieve a similar sort of a chart. For example, Taxi transport payments collected on March via Card and Cash ($40 cash and $38 card payments). I need to display that bar with the main color and the lighter version of the main color. I have two questions here
What sort of a graph possibly fit into my needs?
How can I make a bar with two different shades of the same color (Dark blue and light blue)?
Expected Outcome:
I have tried with the following code, I am sure the dataset is not including the Card and Cash options as I explained earlier.
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23]
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67]
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" }
}],
yAxes: [{
}]
}
}
});
Thank you.
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23],
stack: 1
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67],
stack: 3
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0],
stack: 2
},
{
label: 'Taxi cash',
backgroundColor: "rgba(83, 55, 219,1)",
data: [25, 10, 12, 20, 10, 12, 5],
stack: 2
}]
};
var options = {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" },
stacked: true
}],
yAxes: [{
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
options: options,
data: data
});
body {
background: #1D1F20;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
Look into stacked bar chart example
scales: {
yAxes: [{
stacked: true
}]
}
The options you configured are correct. It will be a bar chart, As you are providing multiple datasets for each mode of transportation, chartjs will consider this as a stacked bar chart.
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Train',
backgroundColor: "rgba(168, 90, 50,1)",
data: [50, 40, 23, 45, 67, 78, 23]
}, {
label: 'Bus',
backgroundColor: "rgba(50, 168, 80,1)",
data: [50, 40, 78, 23, 23, 45, 67]
}, {
label: 'Taxi',
backgroundColor: "rgba(83, 95, 219,1)",
data: [50, 67, 78, 23, 40, 23, 0]
}]
};
var options = {
title: {
display: true,
text: "Transport Mode"
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
var text = data.datasets[tooltipItem.datasetIndex].label;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
var label = '';
for (var i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
if (tooltipItem.datasetIndex != data.datasets.length - 1) {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
} else {
label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
}
return label;
}
}
},
responsive: true,
scales: {
xAxes: [{
gridLines: { color: "rgba(0, 0, 0, 0)" }
}],
yAxes: [{
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'bar',
options: options,
data: data
});
body {
background: #1D1F20;
padding: 16px;
}
canvas {
border: 1px dotted red;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
<canvas id="canvas"></canvas>
</div>
Related
My chart js code is like given below:
var userLowerList = JSON.parse('["5 Mar", "6 Mar", "7 Mar", "8 Mar", "9 Mar", "10 Mar", "11 Mar"]')
var userDataList = JSON.parse('[[1000000, 0, 0, 0, 0, 0, 0], ["-0", "-0", "-0", "-50", "-0", "-0", "-0"]]')
var data = {
labels: userLowerList,
datasets: [{
label: "Credit",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
data: userDataList[0],
},{
label: "Debit",
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
borderWidth: 2,
data: [-65, -59, -20],
},
]
};
var myBarChart = new Chart($("#myChart"), {
type: 'bar',
data: data,
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
stacked: true,
id: 'first-y-axis',
position: 'left',
ticks: {
suggestedMin: 2,
callback: function (label, index, labels) {
return label;
}
}
}],
xAxes: [{
barThickness: 20,
maxBarThickness: 20,
stacked: true
}]
}
}
});
And after this i am getting result like :
enter image description here
why it is not displaying another values in chart . if i uses small values it is working fine . it is not working with large data can anyone please help me related this
There is no any issue with your code. Its just a scale problem. I adjusted your yAxis. It needs a little bit much more work because you have negative values and log(0) is undefined.
var userLowerList = JSON.parse('["5 Mar", "6 Mar", "7 Mar", "8 Mar", "9 Mar", "10 Mar", "11 Mar"]')
var userDataList = JSON.parse('[[10000000, 10, 0, 0, 0, 0, 0], ["-0", "-0", "-0", "-50", "-0", "-0", "-0"]]')
var data = {
labels: userLowerList,
datasets: [{
label: "Credit",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
data: userDataList[0],
}, {
label: "Debit",
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
borderWidth: 2,
data: [-65, -59, -20],
}, ]
};
var myBarChart = new Chart($("#chartJSContainer"), {
type: 'bar',
data: data,
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
stacked: true,
id: 'first-y-axis',
position: 'left',
type: 'logarithmic',
ticks: {
callback: function(value, index, values) {
if (value === 1000000) return "1M";
if (value === 100000) return "100K";
if (value === 10000) return "10K";
if (value === 1000) return "1K";
if (value === 100) return "100";
if (value === 10) return "10";
if (value === 0) return "0";
return null;
}
}
}],
xAxes: [{
barThickness: 20,
maxBarThickness: 20,
stacked: true
}]
}
}
});
https://jsfiddle.net/0pL9zjd5/
Your program is correct, you have a scale problem between both curves,
when you are using high values for the first datas, the second datas are very very small, so the bar is just one or zero pixel, so the datas are not visible for second bar graph.
i suggest you to create a second y axis like this sample 2 axix Y
if you add another yaxis, you couldnt stacked value, or you have to adapt the value form first graph to second graph..
if you have big difference between values, you could modify the type of axis, logaritmic and so on, read the documentation, or see the answer #quentinroger
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
barThickness: 30,
label: 'Credit',
backgroundColor: "green",
yAxisID: 'A',
data: [1500000, 0, 1000, 81, 56, 85, 40],
}, {
type: 'bar',
label: 'Debit',
backgroundColor: "red",
yAxisID: 'B',
data: [-65, 0, -80, -81, -56, -85, -40]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
id: 'A',
stacked: true,
type: 'logarithmic',
ticks: {
max: 10000000,
callback: function(value, index, values) {
if (value === 10000000) return "10M";
if (value === 1000000) return "1M";
if (value === 100000) return "100K";
if (value === 10000) return "10K";
if (value === 1000) return "1K";
if (value === 100) return "100";
if (value === 10) return "10";
if (value === 0) return "0";
return null;
}
}
},
{
id: 'B',
position: 'right',
stacked: true,
max: 0,
beginAtZero: true
}
]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>
When creating a Chart.js line chart everything works as expected on desktop. But when viewed on iOS (iPad, iPhone, etc) the data lines are not shown on the line chart.
See live example here: https://jsfiddle.net/9pcuvthy/. It is using the bundled 2.9.3 version of Chart.js.
You can view it on iOS or using https://www.browserstack.com/ to see the problem in action. This behaviour is happening on all iOS mobile browsers (Chrome, Firefox, and Safari).
How do I make the lines show on iOS?
/* Build the chart arrays */
var lineDataPaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var lineDataSEO = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];
/* Build the chart */
var ctx = document.getElementById("ROIchart").getContext("2d");
var monthLabels = [];
var dateObj = new Date();
dateObj.setDate(1);
var dateYear = dateObj.getFullYear();
var monthYearArray = [];
monthYearArray[0] = "January";
monthYearArray[1] = "February";
monthYearArray[2] = "March";
monthYearArray[3] = "April";
monthYearArray[4] = "May";
monthYearArray[5] = "June";
monthYearArray[6] = "July";
monthYearArray[7] = "August";
monthYearArray[8] = "September";
monthYearArray[9] = "October";
monthYearArray[10] = "November";
monthYearArray[11] = "December";
var dateYearLoop = dateYear;
for (i = 0; i < lineDataSEO.length; i++) {
if (dateObj.getMonth() == 11) {
monthLabels[i] = monthYearArray[dateObj.getMonth()] + " " + dateYearLoop;
dateYearLoop = dateYearLoop + 1;
dateObj.setMonth(dateObj.getMonth() + 1);
} else {
monthLabels[i] = monthYearArray[dateObj.getMonth()] + " " + dateYearLoop;
dateObj.setMonth(dateObj.getMonth() + 1);
}
}
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: monthLabels,
datasets: [{
label: "Paid Leads / Traffic",
backgroundColor: "rgba(255, 98, 132, 0.5)",
borderColor: "rgb(255, 98, 132)",
data: lineDataPaid,
fill: false,
}, {
label: "SEO and Content",
backgroundColor: "rgba(46, 57, 191, 0.5)",
borderColor: "rgb(46, 57, 191)",
data: lineDataSEO,
fill: true,
}]
},
// Configuration options go here
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var text = tooltipItems.datasetIndex === 0 ? ' paid leads for $500' : ' SEO leads for $500';
return tooltipItems.yLabel + text;
}
}
},
legend: {
labels: {
fontSize: 14
}
},
responsive: true,
aspectRatio: 1,
//maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
type: "time",
time: {
unit: "month",
displayFormats: {
month: 'MMM YYYY'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Leads',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
beginAtZero: true,
max: 100,
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
}
}]
}
}
});
.chart-container {
position: relative;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="chart-container">
<canvas id="ROIchart"></canvas>
</div>
I figured it out, thanks to a warning SO showed in the code examaple.
The problem is that the dates I was passing in were not in ISO standard format, and therefore moments() was defaulting to the standard date() which does not work on all browsers.
I changed around the format and it now works fine.
/* Build the chart arrays */
var lineDataPaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var lineDataSEO = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];
/* Build the chart */
var ctx = document.getElementById("ROIchart").getContext("2d");
var monthLabels = [];
var dateObj = new Date();
dateObj.setDate(1);
var dateYear = dateObj.getFullYear();
var monthYearArray = [];
monthYearArray[0] = "01";
monthYearArray[1] = "02";
monthYearArray[2] = "03";
monthYearArray[3] = "04";
monthYearArray[4] = "05";
monthYearArray[5] = "06";
monthYearArray[6] = "07";
monthYearArray[7] = "08";
monthYearArray[8] = "09";
monthYearArray[9] = "10";
monthYearArray[10] = "11";
monthYearArray[11] = "12";
var dateYearLoop = dateYear;
for (i = 0; i < lineDataSEO.length; i++) {
if (dateObj.getMonth() == 11) {
monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
dateYearLoop = dateYearLoop + 1;
dateObj.setMonth(dateObj.getMonth() + 1);
} else {
monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
dateObj.setMonth(dateObj.getMonth() + 1);
}
}
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: monthLabels,
datasets: [{
label: "Paid Leads / Traffic",
backgroundColor: "rgba(255, 98, 132, 0.5)",
borderColor: "rgb(255, 98, 132)",
data: lineDataPaid,
fill: false,
}, {
label: "SEO and Content",
backgroundColor: "rgba(46, 57, 191, 0.5)",
borderColor: "rgb(46, 57, 191)",
data: lineDataSEO,
fill: true,
}]
},
// Configuration options go here
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var text = tooltipItems.datasetIndex === 0 ? ' paid leads for $500' : ' SEO leads for $500';
return tooltipItems.yLabel + text;
}
}
},
legend: {
labels: {
fontSize: 14
}
},
responsive: true,
aspectRatio: 1,
//maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
type: "time",
time: {
unit: "month",
displayFormats: {
month: 'MMM YYYY'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Leads',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
beginAtZero: true,
max: 100,
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
}
}]
}
}
});
.chart-container {
position: relative;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="chart-container">
<canvas id="ROIchart"></canvas>
</div>
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>
I've created a line chart with two datasets, each one its own Y scale&axis using Chart.js.my datasets and options'code is like below.
datasets: [{ fill:false,
label: 'Heat',
yAxisID: "y-axis-1",
data: warm,
},
{ fill:false,
yAxisID: "y-axis-0",
label:'Mass',
data:volume,
]
options:{
scales: {
yAxes: [{ position: "left",
"id": "y-axis-0",
display: true,
ticks: { steps: 10,
stepValue: 5,
callback:(label,index,labels)=>{ return label + "%"; } }
},
{ position: "right",
"id": "y-axis-1",
display: true,
ticks: { steps: 10,
stepValue: 5,
callback:(label,index,labels)=>{ return label + " c"; } } }] }
}
it is looking like the folowing image at the moment.
when I toggle Mass label,the YAxes on the left is still appearing.I want to hide it if I toggle the labels.can you please guide me to solve this problem?
You could achieve this using the following chartjs plugin ...
Chart.plugins.register({
beforeDraw: function(c) {
var canvas_id = c.chart.canvas.id;
if (canvas_id === 'myChart') {
if (c.data.datasets[0]._meta[0].hidden) {
c.options.scales.yAxes[1].display = false;
} else c.options.scales.yAxes[1].display = true;
if (c.data.datasets[1]._meta[0].hidden) {
c.options.scales.yAxes[0].display = false;
} else c.options.scales.yAxes[0].display = true;
}
}
});
ᴅᴇᴍᴏ
Chart.plugins.register({
beforeDraw: function(c) {
var canvas_id = c.chart.canvas.id;
if (canvas_id === 'myChart') {
if (c.data.datasets[0]._meta[0].hidden) {
c.options.scales.yAxes[1].display = false;
} else c.options.scales.yAxes[1].display = true;
if (c.data.datasets[1]._meta[0].hidden) {
c.options.scales.yAxes[0].display = false;
} else c.options.scales.yAxes[0].display = true;
}
}
});
var canvas = document.getElementById('myChart');
var warm = [0, 0, 0, 0, 25, 25, 25, 25, 25, 25];
var volume = [98, 12, 0, 7, 7, 7, 7, 78, 62, 62];
var data = {
labels: ["23.05.2017 15:34:48", "23.05.2017 15:35:02", "23.05.2017 15:35:14", "23.05.2017 15:35:28", "23.05.2017 15:59:35", "23.05.2017 16:00:11", "23.05.2017 16:07:22", "23.05.2017 16:38:04", "23.05.2017 16:38:43", "23.05.2017 16:57:48"],
datasets: [{
fill: false,
label: 'Heat',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: "y-axis-1",
data: warm,
backgroundColor: "rgba(255,153,0,0.4)"
}, {
fill: false,
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: "y-axis-0",
label: 'Mass',
data: volume,
backgroundColor: "rgba(153,255,51,0.4)"
}]
};
var option = {
maintainAspectRatio: false,
responsive: true,
bezierCurveTension: 0,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 3,
fontSize: 10
}
}],
yAxes: [{
position: "left",
"id": "y-axis-0",
display: true,
ticks: {
steps: 10,
stepValue: 5,
//max: 100,
callback: (label, index, labels) => {
return label + "%";
}
}
}, {
position: "right",
"id": "y-axis-1",
display: true,
ticks: {
steps: 10,
stepValue: 5,
//max: 100,
callback: (label, index, labels) => {
return label + " c";
}
}
}]
}
};
var myLineChart = Chart.Line(canvas, {
data: data,
options: option
});
function adddata() {
myLineChart.data.datasets[0].data[7] = 50;
myLineChart.data.labels[7] = "test add";
myLineChart.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>
ChartJS v2.5.0
In the documentation there is legendCallback and generateLabels and I don't understand the documentation that much. Given my code below. How can I change the legends to make it into one legend per line,have a background and line chart legend should look like a line not a bar or in short how to customize the legend.
JS:
vm.labels = ['2015 - Aug', '2015 - Sept', '2015 - Oct', '2015 - Nov', '2015 - Dec', '2016 - Jan',
'2016 - Feb', '2016 - Mar', '2016 - April', '2016 - May', '2016 - Jun', '2016 - Jul', '2016 - Aug',
];
vm.series = [
'A',
'B',
];
vm.data = [
[14, 12, 17, 24, 29, 17, 23, 10, 16, 20, 33, 5, 8],
[50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
];
vm.colors = [
{
backgroundColor: 'rgba(0,104,26,1)',
borderColor: 'rgba(0,104,26,1)',
},
{
backgroundColor: 'rgba(56,80,143,1)',
borderColor: 'rgba(56,80,143,1)',
},
];
vm.options = {
scales: {
xAxes: [
{
ticks: {
callback: function (value) {
var values = value.split(' ');
var date = [values[0], values[2]];
return date;
},
},
},
],
yAxes: [
{
ticks: {
max: 100,
min: 0,
step: 20,
callback: function (value) {
return value + '%';
},
},
},
],
},
// legend
legend: {
display: true,
position: 'bottom',
},
// title
title: {
display: true,
text: 'Chart',
fontSize: 15,
},
// hover
hover: {
mode: 'single',
},
// tooltips
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItems, data) {
var idx = tooltipItems[0].datasetIndex;
var year = tooltipItems[0].xLabel[0];
var month = tooltipItems[0].xLabel[1];
if (idx === 0) {
return year + '-' + month;
} else {
return '';
}
},
label: function (tooltipItems, data) {
var idx = tooltipItems.datasetIndex;
var dataidx = tooltipItems.index;
var seriesValue = data.datasets[idx].label;
var value = data.datasets[idx].data[dataidx];
if (idx === 0) {
return seriesValue + ': ' + value + '%';
} else {
return seriesValue + ' (' + value + '%)';
}
},
},
},
};
vm.datasetOverride = [];
for (var i = 0; i < vm.series.length; i++) {
vm.datasetOverride.push(
{
lineTension: 0,
fill: false,
pointStyle: 'circle',
pointRadius: 0,
pointHoverRadius: 4,
pointHitRadius: 10,
type: 'line',
}
);
}
vm.datasetOverride[1].borderDash = [5, 1];
HTML
<canvas id="line"
class="chart chart-line"
chart-data="vm.data"
chart-labels="vm.labels"
chart-series="vm.series"
chart-options="vm.options"
chart-colors="vm.colors"
chart-dataset-override="vm.datasetOverride"></canvas>
Currently: