We Keep Coding

Edit or remove space between Datasets in Stacked Highcharts chart

I would like to edit or remove the gaps in a Higharts chart like this:
Is there any way to style or configure my chart to achieve this?
This is the Demo:
https://www.highcharts.com/samples/codepen/highcharts/demo/bar-stacked
Thanks

You can control the space between bars using pointPadding, groupPadding and borderWidth properties:
plotOptions: {
series: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0
}
}
Demo:
https://jsfiddle.net/BlackLabel/at1r2xLj/1/
API reference:
https://api.highcharts.com/highcharts/series.bar.pointPadding
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.borderWidth

Hight Chart Polar Scatter Plot values on chart and x-axis

I want to create chart as per below image. I have also created jsfiddle using highchart in the fiddle.
but, still not able to do what I want. How do I do? Any help would be
appreciated.
http://jsfiddle.net/shahrishabhptechnical/2uxq7raf/
jsfiddle - Highcharts Example

You can use basic yAxis to show ticks with labels, but you will need the right properties and wrap on getMarkPath method:
yAxis: {
lineWidth: 1,
tickPosition: 'inside',
showLastLabel: true,
tickWidth: 1,
tickColor: '#000000',
angle: 90,
tickInterval: 1,
labels: {
y: -10
},
lineColor: '#000000'
}
Live demo: http://jsfiddle.net/BlackLabel/e940tvzx/
API: https://api.highcharts.com/highcharts/yAxis
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

How to add gradient colors above 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.
The solution:
DEMO
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
*range selector areas will not be affected

To meet the various criteria you have asked for, I would accomplish this by creating a dummy series to create the gradient effect.
Example Result:
In this scenario, you will need to pre-process your data, and you will need to assign a max value for the y axis explicitly.
Example Code:
var max = 0;
var data1 = [...your data array...];
var data2 = [];
$.each(data1, function(i,point) {
max = point > max ? point : max;
});
max = Math.ceil(max * 1.1);
$.each(data1, function(i,point) {
data2.push((max - point));
});
You will then need to assign that max value as your yAxis max proeprty, and you may need to either set endOnTick: false, or otherwise account for the max resolving with your tickInterval:
yAxis: {
max:max,
endOnTick:false
}
Then for your dummy series, define the background color gradient.
We'll also set the showInLegend and enableMouseTracking properties to false so that it doesn't show in the legend or tooltip:
{
data: data2,
showInLegend:false,
enableMouseTracking:false,
fillColor : {
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')]
]
}
Fiddle Example:
http://jsfiddle.net/jlbriggs/mcp3trmk/
This ensures that the gradient will always match the data, as requested.

As you can see from this js fiddle you have to add this:
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : {
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')]
]
},
tooltip: {
valueDecimals: 2
}
}]
See the documentation for further information

Highcharts : Display the labels (min, max, median etc.) in boxplot

I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.

Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.

Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}

Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/

Is it possible to maintain the fillcolor when the y-axis is reversed?

I have a line graph that uses a fillColor / linearGradient. When I reverse the y-axis, the fill moves to be from the line up to the top of the graph. I want it to stay as the fill from the line down to the x-axis.
For example:
http://highcharts.com/stock/demo/yaxis-reversed
Notice that the blue fill is above the line when the Y-axis is reversed. I want it to remain below the line even when I reverse the axis.
Is this possible?

Here is a simple example as explained in my comment. I hope this helps.
This is the important part:
chart: {
renderTo: 'container',
...
backgroundColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, 'rgb(69, 114, 167)'],
[1, 'rgba(2,0,0,0)']
]
},
},
...
plotOptions: {
series: {
fillColor: 'white'
}
},