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>
Related
I have a created a bar chart by chart js , Below is my code
version : 2.9.4
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
axis: 'y',
backgroundColor: barColors,
data: yValues,
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{
barThickness: 65, // number (pixels) or 'flex'
}],
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero:true,
suggestedMax: 9
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
});
Output that I got like below in pdf, I am using wkhtmltopdf. But it's fine in html page.
Problem is bar size displaying less then Y axis value. Here bar value 3 is showing under the Y axis value 3. My expectation is it will equal to 3.
I had the similar issue while converting html to pdf in IronPdf. I have managed to resolve it by setting animation option to false. So in your case it would be:
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [3, 5, 8, 9, 5];
var barColors = ["#E85900", "#E85900","#E85900","#E85900","#E85900"];
new Chart("myChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
axis: 'y',
backgroundColor: barColors,
data: yValues,
}]
},
options: {
animation: false,
legend: {display: false},
scales: {
xAxes: [{
barThickness: 65, // number (pixels) or 'flex'
}],
yAxes: [{
ticks: {
stepSize: 1,
beginAtZero:true,
suggestedMax: 9
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
});
I am trying to make a bar chart in chart.js I found some ready-made example and I am trying to adapt it for my requirements.
I don't know how to remove the double Y axis.
var densityCanvas = document.getElementById("densityChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var densityData = {
label: 'Density of Planet (kg/m3)',
data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
backgroundColor: 'rgba(0, 99, 132, 0.6)',
borderWidth: 0,
yAxisID: "y-axis-density"
};
var gravityData = {
label: 'Gravity of Planet (m/s2)',
data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
backgroundColor: 'rgba(99, 132, 0, 0.6)',
borderWidth: 0,
yAxisID: "y-axis-gravity"
};
var planetData = {
labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
datasets: [densityData, gravityData]
};
var chartOptions = {
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 0.6
}],
yAxes: [{
id: "y-axis-density"
}, {
id: "y-axis-gravity"
}]
}
};
var barChart = new Chart(densityCanvas, {
type: 'bar',
data: planetData,
options: chartOptions
});
The code above provides this result.
checkout this example [JSFIDDLE](http://jsfiddle.net/p3g07d09/)
I'm using Chart.js to create the following chart:
The issue is that I want to make the scale at the bottom only show 0 and the maximum number (here being 12).
JavaScript:
<script>
new Chart(document.getElementById("leads-bar"), {
type: 'horizontalBar',
data: {
labels: ["Hot", "Warm", "Cold"],
datasets: [
{
backgroundColor: ["#d23232", "#ff9347", "#bbbbbb"],
data: [7, 9, 11]
}
]
},
options: {
legend: {
display: false
},
tooltips: {
display: false
},
title: {
display: false
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
scaleShowLabels: false,
}],
yAxes: [{
stacked: false,
gridLines: {
color: ["#eeeeee"]
}
}]
}
}
});
var dataArr = [154.23, 203.21, 429.01, 637.41];
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: [154.23, 203.21, 429.01, 637.41],
datasets: [{
label: 'LINE',
data: dataArr,
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false,
tension: 0
}]
},
options: {
scales: {
xAxes: [{
ticks: {
min: Math.min.apply(this, dataArr),
max: Math.max.apply(this, dataArr),
callback: function(value, index, values) {
if (index === values.length - 1) return Math.min.apply(this, dataArr);
else if (index === 0) return Math.max.apply(this, dataArr);
else return '';
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></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>
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