CODEWITHSUNDEEP
highchartsoverlapping
daxu
daxu

Reputation: 4114

column highchart overlapping and axis X line issue

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?

  1. I want to show a line as the attched png file. However, seems can't find a way to do it. enter image description here

Can someone help?

Upvotes: 0

Views: 615

Answers (2)

Mark
Mark

Reputation: 108567

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.

Upvotes: 1

jlbriggs
jlbriggs

Reputation: 17800

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

example:

{{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:

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

Upvotes: 0

Related Questions