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
}
});
});
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.
So far I've been able to adjust the size of the pointWidth on a bar chart, which simply changes the width of the bar. But what I really want is the axis to also match that size. For example, take a look at this:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointWidth: 10
}
},
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]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
The pointWidth means the bar is actually smaller, but the xAxis is actually not adjusting it's size to match it. How can I adjust that size?
Height of each data point container is calculated depending on the height of the main container. See the 320px vs 400px container height in the example below.
var opt = {
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointWidth: 10
}
},
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]
}]
};
Highcharts.chart('container1', opt);
Highcharts.chart('container2', opt);
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 320px"></div>
<div id="container2" style="height: 400px"></div>
How to make a horizontal line the whole width?
(marked in red)
Sorry for bad English. Thanks in advance!
You can set gridLineColor: 'red' in yAxis option in highchart.
Fiddle link
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
gridLineColor: 'red',
gridLineWidth: 3,/* change width of line*/
},
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]
}]
});
Using highcharts label formatter
http://api.highcharts.com/highcharts#yAxis.labels.formatter
I'm using the code below to customize the first label, and return the values for all others. Is this how I should use return twice within the formatter? While it works i'm just checking that there isn't a better way to write the function. I'm a little new to js and wondering if the returned data could be combined some how?
Thanks
jsfiddle here
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels: {
//align: 'left',
//x: 0,
//y: -2,
useHTML: true,
formatter:function(){
if(this.isFirst){
return 'test';
}
return this.value;
}
}
},
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]
}]
});
});
I have four different HighChart spline charts. All contain six series representing the six New England states. I want to click any legend and hide/show that series in all charts. I have tried legendclickitem but cannot get it to effect both charts. Is what i am asking possible, if so can you point me in the right direction, thanks.
Answer:
Using Paweł FusIn code and in order to keep a legend on each chart I used the following code. You can click on any legend item and it updates all charts.
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (this.visible) {
$('#container1').highcharts().series[this.index].hide();
$('#container2').highcharts().series[this.index].hide();
$('#container3').highcharts().series[this.index].hide();
$('#container4').highcharts().series[this.index].hide();
}
else {
$('#container1').highcharts().series[this.index].show();
$('#container2').highcharts().series[this.index].show();
$('#container3').highcharts().series[this.index].show();
$('#container4').highcharts().series[this.index].show();
}
return false;
}
}
}
It's possible, take a look: http://jsfiddle.net/teEQ3/
$('#container1').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
enabled: false
},
series: [{
id: 'someId',
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]
}]
});
$('#container2').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
var XYZ = $('#container1').highcharts(),
series = XYZ.get(this.options.id); //get corresponding series
if (series) {
if (this.visible) {
series.hide();
} else {
series.show();
}
}
}
}
}
},
series: [{
id: 'someId',
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]
}]
});
So the idea is to enable only in one chart legend, then in all respective charts hide corresponding series.