My problem is that I have to display one label for each bar but i can't because when i add labels to the json chartjs add new group of empty bars
as I show in the picture, I'm using stacked bars, how I can do that?.
Here is my Json code.
PredialUrbano = {
type: 'groupableBar',
labels: ['Facturado','cobrado','ejemplo'],
datasets: [
{
label: 'Facturado',
data: [67.8],
backgroundColor: '#3A3032',
stack: 1
}, {
label: 'Exento',
data: [20.7],
backgroundColor: '#902528',
stack: 1
},
{
label: 'Ley de ingresos',
data: [20.7],
backgroundColor: '#902528',
stack: 2
},
{
label: 'Cobrado',
data: [20.7],
backgroundColor: '#3A3032',
stack: 3
}
],
options: {
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
},
};
Related
I like to reverse engineer the following highcharts chart: Bitconnect
This is so I can better calculate my intrest on that site.
Thank you
Dev tools -> source -> found element id -> searched source for id -> found code below.
$('#highchartload-closing-day').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: ''
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
xAxis: [{
categories: date,
type: 'datetime',
crosshair: true
}],
yAxis: [{
labels: {
format: '{value} %',
style: {
color: '#FA890F'
}
},
title: {
text: 'Rate of interest',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
series: [{
name: 'Rate of Interest',
type: 'column',
yAxis: 0,
data: rate_of_interest,
color: '#FFC46D',
tooltip: {
valueSuffix: ' %'
}
}]
});
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.
I have a Highcharts chart which gets it's data from a JSON request.
function slowips(target){
var options = {
chart: {
renderTo: target,
type: 'spline',
borderColor: '#0072C6',
borderWidth: 3
},
title: {
text: 'Responsetime'
},
subtitle: {
text: 'Nr.1 is slowest'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
yAxis: {
title: {
text: 'Milliseconds'
},
min: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%Y'
},
labels: {
enabled: true,
},
minorTickLength: 0,
tickLength: 0,
},
plotOptions: {
spline: {
animation: false,
enableMouseTracking: false,
marker: {
enabled: false
}
}
},
series: [{}]
};
$.getJSON('graphs/test.php', function(data) {
options.series = data;
var chart = new Highcharts.Chart(options);
});
}
slowips();
This is an example JSON input:
[ { "name":"sddf", "data": [ ["2013-02-01 00:01:00", 2 ], ["2013-02-02 00:02:00", 2.55 ] ] } ]
Also tried:
[ { "name":"sddf", "data": [ [Date.UTC(12, 3, 09), 2 ], [Date.UTC(12, 3, 10), 2.55 ] ] } ]
The first JSON example renders a chart, but with incorrect X axis data. The second JSON does not render the chart.
Please help out!
You need to use timestamps, so when you load first JSON, then you need to parse it by Date.UTC() / Data.parse(), but functions cannot be places in json inside (as you have in second example).
I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.