We Keep Coding

In highcharts, is it possible to make a bar in a column chart with its top bordering the edge of the chart area "on top" of the chart border?

This is the JSFiddle for demonstration.
In the two bars shown in the above JSFiddle, the respective top and the bottom side of the two bars are not black, but grey, since that is the color of the chart border/border of plot area. Would it be possible to make the two bars to be "on top" of the chart border (so that all their sides are black)? I have tried with zIndex in "series". But that does not work.
These are the most relevant javascript code:
Highcharts.chart('container', {
chart: {
type: 'column',
borderWidth: 1,
plotBorderWidth: 1,
marginBottom: 100
},
plotOptions: {
series: {
borderColor: 'black',
animation: false
},
},
xAxis: {
categories: ['1', '2']
},
yAxis: {
tickInterval: 10,
min: -50,
max: 50
},
series: [{
data: [50, -50],
zIndex: 300
}]
});

To achieve this effect, you can set series.column.clip: false.
Disabling this option allows series rendering over plotArea borders.
series: [{
clip: false,
data: [50, -50]
}]
Live demo:
https://jsfiddle.net/BlackLabel/2kyc4dbu/
API reference:
https://api.highcharts.com/highcharts/series.column.clip

In a Highcharts pie chart, how to keep height in sync when window is resized?

When the window size shrinks, the width of the pie is updated, but the height of the whole canvas is not updated, which leads to much space above and below the pie. How can I make sure the graph doesn't take up more space than needed after resize?
Demo: http://jsfiddle.net/remisture/xV8PM/167/
Thanks
$(function() {
$('#container').highcharts({
title: null,
marginLeft: 0,
marginRight: 0,
spacingLeft: 0,
spacingRight: 0,
chart: {
type: 'pie'
},
plotOptions: {
pie: {
size: '100%',
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
#container {
outline: 1px solid red;
padding: 0;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Place your container inside a wrapper <div>, set your container width to 100% and then you will have to redraw your chart whenever the window resize event occurs,
Here is a working DEMO: http://jsfiddle.net/xV8PM/172/
Hope this helps!

highcharts. set full height of column/bar background color

I need to set a gradient background color to full height of column in Highcharts. Like on the image below. How can I do it? Help me, please.
here an example of what I need

Make another series which has points equaled yAxis maximum value. You can use pattern-fill plugin and set the pattern to a specific column.
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
pointPadding: 0
}
},
series: [{
enableMouseTracking: false,
showInLegend: false,
grouping: false,
color: 'url(#highcharts-default-pattern-1)',
data: [100, 100]
}, {
data: [20, 50]
}, {
data: [40, 30]
}]
});
You can read more about modifying/creating patterns here - http://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Live example and output
http://jsfiddle.net/rgs9uv39/

Go here and import your image: http://www.colorzilla.com/gradient-editor/ and after get your css properties.
If you need the element to be full height use:
.yourClass {
height: 100vh;
}

How to add gradient colors above of the chart line?

Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
yAxis: {
reversed: true,
showFirstLabel: false,
showLastLabel: true
}
I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.
Could any one help me to solve this.
I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color.
As per #DaMaxContent answer , the output will act like below image.
I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.

The break down:
You can use gridZindex and backgroundColor/fillColor properties to
produce the desired effect. Only issue is that the grid has to be
displayed over graph. Here is the solution: DEMO
Here is the code behind it:
chart: {
type: 'area',
backgroundColor: { //<<--that is what you are using as fill color
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: {
reversed: false,
showFirstLabel: false,
showLastLabel: true,
gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it
},
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : "#fff", //<<--fill color under the line to simulate effect
zIndex: 1000,
tooltip: {
valueDecimals: 2
}
}]
If you wish to get rid of the marginal color areas, you can get rid off the graphs margin with chart: { [... ,] margin: 0 [, ...] } and then use the container's padding as the graph margin.
more info:
highcharts styling guides:
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
grid Z index:
http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm
background color:
Changing HighCharts background color?
(alternative to bg color) plot background color (bg color of main plot only)
http://api.highcharts.com/highcharts#chart.plotBackgroundColor

Highcharts pie chart outer circle

Is it possible to add a circle around a pie chart in highcharts?
I know I can do it with an absolute positioned div just over the size of the chart, with a negative zIndex, but it doesn't look entirely right since the graph is drawn with SVG (notice the slight offset on the attached image where I've tried that approach
Thank you!

You could use a shadow with a 0 offset.
http://jsfiddle.net/blaird/RgdJ3/
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
pie: {
shadow: {
color: 'black',
offsetX : 0,
offsetY: 0,
opacity: 1,
width: 3
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});