Develop Reference

Add Data text on top of Bars (vertical) - Highcharts Bar charts

I am working with Highcharts Bar Graph (vertical) and I would like to have the Members data to appear on top of each bar (hovers we will keep as well which is working). I've tried various ways with plotOptions and could not get this to work to show Members data on top of the bar graph view. The first link is my working code.
**https://codepen.io/jenfloods/pen/jOyXEQd**
The second link above is the example is how I would like the data text to appear on top of a bar graph with white shadow letters but this would apply to my vertical bars and not horizontal as this example shows.
**https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bar-datalabels-align-inside-bar/**
Anyone has an example or can work with my code to make it happen?

You need to enable data labels for series and use the configuration like below:
plotOptions: {
series: {
...,
dataLabels: {
rotation: 90,
verticalAlign: 'top',
y: 10,
align: 'left',
inside: true,
enabled: true,
color: '#FFFFFF'
},
}
}
Live demo: http://jsfiddle.net/BlackLabel/y04j6z3m/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.dataLabels

Plot line is hiding behind trend in highcharts and movement of plotline is become very hindrance when loaded with very large data sets

Hi all I am using high stock to visualise my data. In that plot line is hiding behind the trend.is there is any way to show the plot line above the trend. and also movement of plot line become hindrance when the chart is loaded with large data sets.
I have attached image for reference. Here plot line is hiding behind the trend.

You should use the zIndex option of plotLines to solve this problem.
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
}
You can see the live example in this jsFiddle.

Highcharts Drilldown from Stacked Column chart to Stacked Area Chart

I've got to a point with this chart where I have a stacked column chart drilling down to a stacked area chart - the big issue has been maintaining the colours for the different layers of data in each stack. That is now sorted but I have a further issue.
In the stacked Area chart I can see the markers for each point but I can't get the area to fill. Not sure why as the markers indicate the right points from the data.
Please help.
Here is the code
plotOptions: {
column: {
stacking: 'normal'
},
area: {
stacking: 'normal',
colorByPoint: true,
colors: ['#2B6E97','#4184AD','#589BC4','#6FB2DB','#86C9F2']
}
},
http://jsfiddle.net/robdwright/uxo2edzu/53/
Thanks
Rob

Overlapping bars with JQPlot

I am creating a chart with JQPlot. The chart will contain several series, each series with two bars. The second bar of each series should be partly covered by the first bar. I tried to achieve this goal by setting barPadding to a negative value:
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: false,
fillToZero: true,
barPadding: -5, // number of pixels between adjacent bars in the same group (same category or bin).
barDirection: 'vertical', // vertical or horizontal.
barWidth: 20, // width of the bars. null to calculate automatically.
shadowOffset: 0 // offset from the bar edge to stroke the shadow.
},
},
This indeed makes the bars overlapping but the second bar overlaps the first one.
I would like it vice versa.
Is this possible with JQPlot or does anyone know another library with this possibility?

There is no such configuration in jqplot. However there is a hacky way to do it by setting the z-index.
$('#chart .jqplot-series-canvas:first').css( "z-index", 99999);
Demo

Make single bar in highcharts the width of the container

I have a chart using a stacked bar. the container is 400px wide x 20px height, but I can't seem to get the bar to extend to 100% of the container.
There will only ever be one bar.
You can see the remaining part of the container as there is a light blue background colour (see jsfiddle).
How can i force the width of the bar to 100% of the container?
http://jsfiddle.net/SDK9X/

I've found the answer. I changed the stacking property to 'percent'. It was previously 'normal'
plotOptions: {
series: {
stacking: 'percent', // 'normal'
groupPadding: 0,
pointPadding: 0,
}
},