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.
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.
This may sound like a really simple question but I've spent hours trying to accomplish this and it's making me feel very frustrated.
Please can someone tell me how to set the colour of the name in a series?
I was able to fully configure all other aspects of my chart but the series name remains black.
I saved one of the Highchart examples here http://jsfiddle.net/ktnexbcr/ how do I set the text "Meteorological data" in the series to blue or red or anything other than black.
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],
name: 'Meteorological data',
color: "red",
font-color: "blue" ??? <-- how
}]
Is it simply not possible?
Thank you,
Dan
Legend is what your after, you need to look in the docs http://www.highcharts.com/docs/chart-design-and-style/themes
$(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],
name: 'Meteorological data',
color: "red",
}],
legend: {
itemStyle: {
color: 'blue'
}
}
});
});
fiddle here
You need to use legend.labelFormat or legend.labelFormatter. For example:
legend: {
labelFormat: '<span style="color:{color}">{name}</span>'
},
Demo: http://jsfiddle.net/ktnexbcr/2/
you can set common styles using following codes across charts
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'serif'
}
}
});
to set legend color
legend: {
itemStyle: {
color: 'red',
fontWeight: 'bold'
}
},
highcharts example
For more available option, refer this link
The bar chart demo is here,
jsfiddle
I want to increase the width between different bars, What configuration should I set ? please give me some advice. thks!
To increase width between two bar in highcharts.js you can use groupPadding,
API: http://api.highcharts.com/highcharts#plotOptions.bar.groupPadding
Example: http://jsfiddle.net/6j3y54na/2/
groupPadding: 0.2
If you want to increase gap between bars in same group then you can use pointPadding
API: http://api.highcharts.com/highcharts#plotOptions.bar.pointPadding
Use pointWidth property, a pixel value specifying a fixed width for each column or bar:
plotOptions: {
series: {
stacking: 'percent',
pointWidth: 5
}
},
JSFiddle
pointWidth is the parameter to set the width for bar width .Refer this jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 50,
marginBottom: 90
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'percent', pointWidth: 4
}
},
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]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
});
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
},
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.