column highchart overlapping and axis X line issue

Question

I am trying to use highchart to draw a column chart (as you can see in jsfiddle example).

http://jsfiddle.net/md2zk/48/my jsfiddle example

However, I face two problems:

1 data overlapping. The image width is fixed, but the data values are dynamic. If the data is close, it will overlap each other. Is there a way to solve this?

2. I want to show a line as the attched png file. However, seems can't find a way to do it.

Can someone help?

Answer 1

1.) Simple answer is to just rotate the labels:

plotOptions: {
    series: {
        dataLabels: {
            rotation: 290,
            y: -32,
            x: 10
        }
    },

Example here. If you want to get fancier, see this answer by @PawelFul.

2.) To add a yAxis line, set yAxis.lineWidth > 0:

yAxis: {
    lineWidth: 1,

See updated fiddle.

Answer 2

For the line series, you just need to add another series, with type:'line'

example:

• http://jsfiddle.net/md2zk/50/

{{edit to address comments:

if you want the line series to start at the Y axis line, you need to use a second x axis, and assign the data series to that axis. categorical axes will not start the data point at the edge of the chart.

}}

For the overlapping data labels, there is no out of the box solution to avoid collision for these elements. There are a number of feature requests that may be relevant to the issue here:

• http://highcharts.uservoice.com/forums/55896-general?query=datalabel

But with a fixed width and dynamic number of columns, you're going to have a variety of problems.