I am trying to reduce the space between bars, and I am pretty sure it has to be within this piece of code. I removed the code that displays the legend and yAxes assuming I would not need to edit those parts.
barchart = new Chart(myChart, {
type:'bar',
data:{
labels: {{ data.x_vals | tojson }},
datasets:[{
label:'Liquid Level',
data:{{ data.y_vals }},
backgroundColor: gradient,
borderWidth:1, //Effects plotted line on chart
borderColor:'white',
hoverBorderWidth:1,
hoverBorderColor:'#000',
barPercentage: 1.0,
categoryPercentage: 1.0
}]
},
options:{
// legend is here
},
scales: {
// yAxes is here
xAxes: [{
display: true,
ticks: {
autoSkip: true,
padding: 4,
fontSize: 12
}
}]
},
You can set the category and bar percentages to 1:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'blue',
categoryPercentage: 1,
barPercentage: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
EDIT:
Make sure you have at least chart.js version 2.9 installed since any version below its not implemented yet
Related
I am creating the chart as you see below:
So I can display the charts separately but I cannot display both of the charts on the same chart line.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];
new Chart("statisticChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(25,162,242,1)",
borderColor: "rgba(2, 92, 145, 1)",
data: yValues
}]
},
options: {
legend: { display: false },
scales: {
yAxes: [{ ticks: { min: 6, max: 16 } }],
}
}
});
var barColors = ["#19A2F2"];
Chart("statisticChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
legend: { display: false },
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
</script>
</body>
</html>
So could you please have a look? Besides I also care about css, so I would like to display the second chart with the color #19A2F2, thanks in advance.
Chart.js supports mixed charts - which involves just using one Chart instance of course.
All you need to do is take the datasets objects of your two individual charts and put those in an array assigned to the Charts' data.datasets property.
For example:
var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];
new Chart("statisticChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
type: "line",
fill: false,
lineTension: 0,
backgroundColor: "rgba(25,162,242,1)",
borderColor: "rgba(2, 92, 145, 1)",
data: yValues,
fill: false
},
{
type: "bar",
backgroundColor: "#19A2F2",
data: yValues
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 6,
max: 16
}
}],
},
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>
I'm working on an application that will generate some charts and I'm using chartjs to draw them.
The issue I'm facing is this: the charts will be generated with dynamic data. The application may generate up to 9 datasets and rarely they will have the same size. How can I make chartjs advance or fill the values when the datasets size won't match?
I saw some examples here at stackoverflow and even at chartjs github page but they didn't work me.
This is an example of what I have so far: https://jsfiddle.net/camarrone/49onz8no/1/
Two datasets with different data array. The first value for the second dataset doesn't exist hence it should be zero or null. Like this: https://jsfiddle.net/camarrone/d39a0qgw/
This is "failing" code for reference:
<html>
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
type: 'line',
fill: false,
label: 'Label_1',
borderColor:"hsl(181.40751321285697,45.9256727159548%,27.54659126333186%)",
data: [7,3,11,2,3]
},
{
type: 'line',
fill: false,
label: 'Label_2',
borderColor:"hsl(181.91996173600447,39.046658571489985%,65.63412032509264%)",
data: [1,6,1,2]
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
}
});
</script>
</body>
</html>
For those facing the same issue and future reference. Here is the working code for my case:
<html>
<head>
<script type='text/javascript' src='./momentjs-with-locales.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
fill: false,
label: 'Page View',
borderColor: "hsl(226.15793242887034,78.48665583019744%,62.177112879909686%)",
data: [
{
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date('2018-04-21T16:00:00'),
y: 7
},
{
x: new Date("2018-04-21T18:00:00"),
y: 3
},
{
x: new Date("2018-04-21T20:00:00"),
y: 11
},
{
x: new Date("2018-04-23T12:00:00"),
y: 2
},
{
x: new Date("2018-04-23T13:00:00"),
y: 3
}
],
},
//dataset 2
{
fill: false,
label: 'View Content',
borderColor: "hsl(232.84952363040048,93.45575469963681%,28.844243872178236%)",
data: [
{
labels: ["2018-04-21T17:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date("2018-04-21T17:00:00"),
y: 1
},
{
x: new Date("2018-04-21T20:00:00"),
y: 6
},
{
x: new Date("2018-04-23T12:00:00"),
y: 1
},
{
x: new Date("2018-04-23T13:00:00"),
y: 2
}
],
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
scales: {
xAxes: [
{
type:'time',
distribution: 'series',
time: {
unit: 'day',
displayFormat: {
day: 'DD/MM/YYYY'
}
},
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
}
]
}
}
});
</script>
</body>
</html>
DEMO online:
I am not using x/y formatted datasets, so I kept looking. I ended up finding that inserting 'null' values solved my problem--the arrays can then be the same length, and not have drops to zero polluting the shapes.
However, note that this seems to not work with log scales on line graphs. Luckily, the only graphs I use uneven-length datasets on is probably best presented in linear form, but it is irritating.
Note also that you may want to utilize the { spanGaps: false } option.
I have the following code:
data = {
labels: ["CategoryA", "CategoryB"],
datasets: [
{
label: "Group A",
data: [95, 1]
},
{
label: "Group B",
data: [80, 3]
}
]
};
new Chart(ctx, {
type: 'bar',
data: data,
options: option
});
My goal is to directly compare the numbers in Group A and Group B per category. However, the bars for CategoryA take up the entire vertical space while CategoryB is barely visible.
How can I make CategoryA display on a scale from 0 to 100 and CategoryB on a scale from 0 to 5?
EDIT:
Here was the problem I had. Was unable to make a solution with only one graph, ended up just using two separate ones. If anyone knows how to do it in one graph, please let me know!
Unfortunately, there is no built-in method in ChartJS to achieve this at the moment.
Though, one way I can think of achieving this, is to create two different charts and place them on top of each other, as such ...
// CHART 1
var data = {
labels: ["Category A", "Category B", "Category C"],
datasets: [{
label: "Group A",
data: [95, 0, 0],
backgroundColor: 'blue'
}, {
label: "Group B",
data: [60, 0, 0],
backgroundColor: 'red'
}]
};
var option = {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 100
}
}]
}
}
new Chart(ctx, {
type: 'bar',
data: data,
options: option
});
// CHART 2
var data2 = {
labels: ["Category A", "Category B", "Category C"],
datasets: [{
label: "Group A",
data: [0, 1, 2],
backgroundColor: 'blue'
}, {
label: "Group B",
data: [0, 3, 4],
backgroundColor: 'red'
}]
};
var option2 = {
scales: {
yAxes: [{
position: 'right',
ticks: {
min: 0,
max: 5
}
}]
}
}
new Chart(ctx2, {
type: 'bar',
data: data2,
options: option2
});
#chart-wrapper {
display: flex;
}
#ctx2 {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="chart-wrapper">
<canvas id="ctx"></canvas>
<canvas id="ctx2"></canvas>
</div>
I'm new in ChartJS and I have some problems with the legend. I have a simple bar chart with just 3 bars like:
<div class="x_panel">
<div class="x_title">
<h2>Bar graph</h2>
<ul class="nav navbar-right panel_toolbox" style="padding-left:5%">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
for which I'm trying to display the legend bellow the chart like in the attached image
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: '# of Votes',
backgroundColor: "#000080",
data: [80]
}, {
label: '# of Votes2',
backgroundColor: "#d3d3d3",
data: [90]
},
{
label: '# of Votes3',
backgroundColor: "#add8e6",
data: [45]
}]
},
options: {
legend: {
display: true,
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
But my displayed chart is empty :(
I've also tried displaying the legend by adding another div bellow the canvas and calling it by:
document.getElementById('barlegend').innerHTML = mybarChart.generateLegend();
with the same result :(
What am I doing wrong?
Based on the code that you supplied in your question, it looks like you forgot to add labels data in your chart data object. Without this information chartjs is not able to generate your axis and map each dataset data to it.
Also, since you mentioned you wanted the legend to be below the chart, I added the display: bottom option. Here is the working code.
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Votes'],
datasets: [{
label: '# of Votes',
backgroundColor: "#000080",
data: [80]
}, {
label: '# of Votes2',
backgroundColor: "#d3d3d3",
data: [90]
}, {
label: '# of Votes3',
backgroundColor: "#add8e6",
data: [45]
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Here is a working codepen example as well.
With the latest version of the chart.js (3.6.0), you can control the Legend display with the following code:
const options = {
plugins: {
...
legend: {
position: "right", // by default it's top
},
...
},
};
I know this has been here for so long but might help someone who faced the same issue as me in the future.
Hi I am using canvasjs for making a chart. It is very simple to make a particular chart but here is the problem I want to have two different charts such that a pie chart would be inside of a doughnut chart.
I am not able to make one other inside. I have used the
display : inline-block
for the two div id but no effect. Could someone please suggest me how we can make that happen.
This is my code-
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link type='text/css' rel="stylesheet" href='style.css' />
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "doughnut",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainerpie", {
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "pie",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div>
<div id="chartContainerpie" style="height: 300px; width: 100%;></div>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</div>
</body>
</html>
The CSS only contains the line for display block.
This is probably not the perfect answer but it will point you in right direction:
The idea is to change the background color of canvas to transparent and overlap the two canvas using position css
CSS
#chartContainerpie{
position: absolute;
top: 130px;
left: 0px;
}
#chartContainer{
position: absolute;
top: 0px;
left: 0px;
}
JS
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "My First Chart in CanvasJS"
},
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
type: "doughnut",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainerpie", {
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
indexLabelFontSize: "14px",
type: "pie",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
Here is fiddle