I have a stacked bar chart that with multiple series and categories.
When showing/hiding the series, I want the categories having no data to hide.
This works fine when it is the first or last category, but the middle category doesn't disappear.
In the following snippet, when hiding the A series (by clicking in the legend) the category 1 disappears. But when I hide, B and C, the 2 category doesn't disappear. What I want is that the middle categories to disappear too (no more white space in the middle).
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: [1, 2, 3]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [{ x: 0, y: 5 }]
}, {
name: 'B',
data: [{ x: 1, y: 4 }]
}, {
name: 'C',
data: [{ x: 1, y: 4 }]
}, {
name: 'D',
data: [{ x: 2, y: 2 }]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 200px; max-width: 800px; height: 250px; margin: 0 auto"></div>
I already tried:
passing the data as an array,
not specifying the category array, because I don't really want to show the category, but I don't want the space to be kept when there is no data
play around with stacking
I know this could be achieved programmatically, that's no problem. But, what I would like to know is:
is this a bug/feature?
is there a Highcharts option that I missed?
do you have any different suggestions of how can I achieve something similar to this?
Thanks!
Related
I'm trying to duplicate the X axis ticks on both sides of the chart (Bottom and Top).
I have seen older questions of this asked but this was during chartjs 2.x -- They have changed the scale section of the options since then. You used to be able to do something similar to this:
xAxes: [
{
position: 'top',
},
{
position: 'bottom',
}
]
But in Chartjs 3.x you can't supply an array for xAxes. You need to now add an ID to your dataset then in the scale options reference that ID. But I can't reference 1 dataset in 2 scale objects when one says position: top and the other position: bottom. It will only use the last scale object.
So my question is, with ONE dataset. How can I have it so the X axis is on the bottom of the chart AND the top of a horizontal bar chart? That way in case the chart is big I don't have to always scroll down to see what the value is.
Edit: Based on feedback I now have the following result, which is closer to what I'm looking for, but what's going on with the ticks on the top. Why aren't they matching the numbers on the bottom?
new Chart('myChart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
data: [1, 3, 6, 2, 8, 9],
borderColor: '#00D',
}]
},
options: {
indexAxis: "y",
scales: {
x: {
},
x1: {
position: 'top'
}
}
}
});
canvas {
max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>
In case you want the see the same ticks at the top of the chart, simply define a second x-axis as follows:
x1: {
position: 'top'
}
Please take a look at below runnable code and see how it works:
new Chart('myChart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
data: [1, 3, 6, 2, 8, 9],
borderColor: '#00D',
}]
},
options: {
scales: {
x: {
},
x1: {
position: 'top'
}
}
}
});
canvas {
max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>
In case you want to produce a horizontal bar chart, you could define the x-axes as follows:
scales: {
x: {
min: 0
},
x1: {
position: 'top',
min: 0,
max: 9
}
}
Please take a look at the runnable sample below and see how it works when the data is dynamic:
var data = [3, 6, 8, 9, 31];
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
data: data,
borderColor: '#00D',
}]
},
options: {
indexAxis: 'y',
plugins: {
legend: {
display: false
}
},
scales: {
x: {
min: 0
},
x1: {
position: 'top',
min: 0,
suggestedMax: Math.max(...data)
}
}
}
});
canvas {
max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart"></canvas>
i am trying to put labels on x-axis for the charts mentioned below.
even the labels that i want to display are taken from the database and displayed. for each value of y-axis there is a repective x-axis. so i want like when i hover on the point x-axis value : y-axis value. it should appear like this.
If anyone had tried this earlier, please help.
Highcharts.stockChart('container', {
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'yellow',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
Use tooltip's formatter (Highcharts API here)
tooltip: {
formatter: function() {return this.x+" : "+this.y}
}
Assuming you have the names you want to give to the x-Axis in an array, this code should work:
Javascript:
var namesArray = ["Name1", "Name2", "Name3", "Name4"]
Highcharts.stockChart('container', {
tooltip: {
formatter: function () {
var s = '';
$.each(this.points, function () {
s += namesArray[this.series.data.indexOf(this.point)] +" : "+this.y;
});
return s;
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: [3, 5, 6, 7]
}]
});
Please notice I added namesArray as an example here.
What the tooltip function does is the following:
it declares a String
it loops through all of your Highstock points
for each point, it gets the index of the point in series.data and gets the same index from namesArray. This should achieve the thing you need.
I would like to create a chart similar to the following it ChartJS. It's 2 line charts but with the space between the two lines filled in.
The X axis will be the time of each sample, the y axis the min & max temperature recorded at that time.
The area between the min/max is the only bit that needs to be filled in, outside the min/max lines should remain unfilled.
Is this possible with ChartJS?
Thanks
Shawty
Did you know abut hicgcharts
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Temp'
},
xAxis: {
categories: ['1pm', '2pm', '3pm', '4pm', '5pm']
},
credits: {
enabled: false
},
colors: [ '#910000', '#00FFFF'],
series: [{
name: 'Max Temp',
data: [5, 3, 4, 7, 2]
}, {
name: 'Min Temp',
data: [2, 2, 3, 2, 1]
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Taken from another answer but closer to what you wanted. (color only in middle).
So basically, in ChartJS you need to overlay 2 filled line charts, and make the bottom one white. (sadly it overwrites the gridlines)
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Temp'
},
xAxis: {
categories: ['1pm', '2pm', '3pm', '4pm', '5pm']
},
credits: {
enabled: false
},
colors: [ '#910000', '#FFFFFF'],
series: [{
name: 'Max Temp',
data: [5, 3, 4, 7, 2]
}, {
name: 'Min Temp',
data: [2, 2, 3, 2, 1]
}]
});
});
.highcharts-series-1 path{fill-opacity:1!important}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
There seems to be an issue with displaying stacked charts with multiple series, where the series don't have the same number of points.
JSFiddle: http://jsfiddle.net/k68pwbm7/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
tooltip: {
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [500, 30, 400, 70, 2,500, 30, 400, 70, 2]
}, {
name: 'Jane',
data: [200, 2000, 30, 200, 1,200, 2000, 30, 200]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Look at point at X=6 (tall column), if you mouse over the column at Y<500, a tooltip shows up for X=4, which is the last point for the "Joe" series. Then if you mouse over the same column at y>500 the correct tooltip shows up with just the two series for that column.
Is this a known issue? Any way to fix this?
Upgrading to Highcharts 4.1.10 fixed the issue for me.
I'm using bar chart with Highcharts 4.0.4.
When categories labels are to close to each other half of them disappear. I want to disable this behaviour because there is plenty of space.
I've tried to search Highcharts documentations with: overflow, crop, clip, hide and so on. Nothing seems to fit in.
Examples:
height: 260px;
http://jsfiddle.net/t1wtLLnc/3/
height: 230px;
http://jsfiddle.net/t1wtLLnc/2/
As you can see in second example only 5 of 10 categories are shown.
In order to force the chart to show all categories regardless of available space set the xAxis.labels.step to 1.
Here is code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9', 'cat10'],
title: {
text: null
},
labels: {
step: 1
}
},
series: [{
name: 'ser1',
data: [107, 31, 635, 203, 2, 34, 54, 41, 105, 20]
}, ]
});
});
And here is sample fiddle.
Note that you can run into issues with cramping up of text. We manipulate the spacingLeft and margins to accommodate long titles. In some cases we are forced to increase height of chart.