I've searched everywhere in the highcharts api, and I am wondering if this is possible.
Please see the attached screenshot...
Is it possible to have the columns distanced from the edge of the chart boundaries like so? The y axis grid line should still take up the entire width of the chart.
Edit: The distance BETWEEN the columns needs to be less than the distance between the columns and the edge of the chart. Imagine a box encapsulating the columns, i'm concerned with the padding between this 'box' and the edge of the chart.
Thanks!
You can put some empty columns on both ends and add empty strings to their categories working example.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
tickWidth: 0,
categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', '']
},
series: [{
data: [null, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, null]
}]
});
});
Depending on how your chart is set up, you can use minPadding and maxPadding on the xAxis. e.g.
xAxis: {
minPadding: 0.2,
maxPadding: 0.2
},
Related
Area in highcharts highlights the bottom area by default.
I want to highlight the top area.
Is there a recommended way to do that?
Based on this demo, I can change the threshold to 250 to get similar result (as shown in My Expectation)
The only solution I can come up with is:
find out the max y of all data points.
let MAX = k * y_max. (k is a custom-defined factor, say, 1.2; to get better result, y_min is also needed to get a proper k dynamically)
Use the following configuration.
yAxis: {
max: MAX
},
plotOptions: {
series: {
threshold: MAX
}
}
But this requires some js computation and I wonder if highcharts supports this itself.
UPDATE:
I think I'd better state my original question here. I want to support 3 types of areas:
Within Upperbound and Lowerbound
Below lower bound
Above upper bound
I implemented the first one with arearange. But arearange doesn't support missing upper/lower bound; it will remove the thresholds altogether if one bound is missing.
Is there a way to avoid computing the threshold setting by myself?
Using CSS you can obtain something similar to your picture:
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
color: '#ff0000',
fillColor: '#ffffff',
fillOpacity: 1
}]
});
.highcharts-plot-background {
fill:rgba(255,0,0,0.5);
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
or almost identical using threshold together with negativeColor:
Highcharts.chart('container2', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
color: "#FF0000",
fillColor: '#f00000',
fillOpacity: 0.5,
threshold: 300,
negativeColor: '#f00000',
negativeFillColor: 'rgba(255,0,0,0.5)'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container2" style="height: 400px"></div>
Here is a fiddle: http://jsfiddle.net/beaver71/0sameLb6/
Thanks #TorsteinHonsi.
I posted a issue, and #TorsteinHonsi responded quickly and commited a change. area will support -Infinity/Infinity shortly.
I have a Highchart which displays earth and water pressure data (stored in the Database). I want to mark the area between the various points on x-axis with different colors which marks the type of area from where the data was collected. I have the color data (shown on top in a table) but I need to mark it on the chart
My chart looks as follows:
I want the chart to be viewed so as the background color from 284 to 285 is orange and from 285 to 286 is Pink and so on...
How can I do that
You have two possibilities:
use multicolor series plugin
set extra serie and set zones
You can use the render function provided like so
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) { // on complete
chart.renderer.rect(74, 0, 100, 300, 0)
.attr({
'stroke-width': 0,
stroke: 'red',
fill: 'yellow',
zIndex: -1
})
.add();
});
});
http://jsfiddle.net/z3jzjkke/
I have chart like this reference links
You can switch off series, but without data chart change size. And in my case it souldn't do this. I want to show ticks labels all time or make chart to have fixed plot plase. How can I do this?
$(function () {
$('#container').highcharts({
title: {
text: 'Y axis showEmpty demo'
},
subtitle: {
text: 'Left axis shows even if Series 1 is hidden. Right axis does not show when Series 2 is hidden.'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
lineWidth: 2
// showEmpty: true // by default
}, {
lineWidth: 2,
opposite: true,
showEmpty: true,
min:0
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
yAxis: 0
}, {
data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5],
yAxis: 1,
visible: false
}]
});
});
One way to do this is by setting an axis min and max.
See example:
http://jsfiddle.net/jlbriggs/Lpgxoo0e/
{{ edit to address comments:
Why would you want to set a max when there is no data, and remove it when there is data?
Just find out what the max in your data is, and set it accordingly.
It is not possible to simply "unset" the min and max values - they must be set to something (they are always set to something, whether you choose what that is, or the library chooses...)
What you can do, if you don't want to pre-process your data to get the max, is to set a callback function on your chart call, and make use of the getExtremes() and setExtremes() functions to explicitly set the min/max to the values that Highcharts would naturally use anyway.
http://api.highcharts.com/highcharts#Axis.getExtremes
http://api.highcharts.com/highcharts#Axis.setExtremes
In that case, you'll also need to set all series to visible by default, and hide them after you set the axis min/max values.
Example:
http://jsfiddle.net/jlbriggs/Lpgxoo0e/5/
{{edit
Ok, one more:
http://jsfiddle.net/jlbriggs/oretk9m3/
This uses same function but calls it from the legendItemClick event, which requires a little more complication.
Given the below image - I would like to take the label from the legend for each column and print it on the column itself. I have not been able to find anything in the HighCharts API that will allow me to do this. Does anyone have any ideas or examples of something like this I could look at?
Thank you!
EDIT
There is a better example of what I want to accomplish
I think that is easily discernible. The use case is these stats are displayed on large monitors around a call center. The legend is typically too small to read from any given distance.
Just try formatting the data label on a column chart, here is an example to get you started.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: '#000',
style: {fontWeight: 'bolder'},
formatter: function() {return this.x + ': ' + this.y},
inside: true,
rotation: 270
},
pointPadding: 0.1,
groupPadding: 0
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
Really, what this case calls for, is for this to be a bar instead of a column, and category labels that are not rotated, and are clearly readable.
Example:
http://jsfiddle.net/jlbriggs/yPLVP/23/
You can also offset the axis labels to put category name on the bar itself, but really - it's just not as good a way to display as the above example:
http://jsfiddle.net/jlbriggs/yPLVP/24/
These could both be a column instead of a bar still, of course, but rotating the labels is always a bad idea if it can be avoided.
These methods also allow the data label to still be used as a data label should that ever be required.
I am showing high chart in popup,when i download this chart its text getting cut.
I tried by giving padding and by decreasing font size also,but still its getting cut.
For better understanding i am attaching screen shot of popup and pdf.
Any help on this would be greatly appreciated. If there are any references for this kind of issue, please let me know them also.
Thanks in advance
Try to set exporting width to the necessary value.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
width: 200
}
});
});