Develop Reference

Highchart highlight area between points with custom colors

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/

Padding between column and y axis line - is this possible?

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
},

Highcharts label formatter return inside and outside if statement? Is this correct?

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]
}]
});
});

Changing the color of the point dynamically in highcharts

I have been able to change the color of point in a graph dynamically, but when I hover over that point then the color of that point is changing to previous color.
I have a fiddle here: jfiddle
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
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]
}]
});
// the button handler
$('#button').click(function() {
chart.series[0].data[2].graphic.attr({ fill: '#FF0000' });
chart.redraw();
});
How can I change the color of the point dynamically in a graph?

I think you are looking to update the marker color dynamically.
you can use update functionality for this
chart.series[0].data[0].update();
Here is a jsFiddle for your reference. I hope this will be useful for you.

is this what you are looking for?
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-select-fillcolor/
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
}
}

Download pdf from High Charts

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
}
});
});​