CODEWITHSUNDEEP
highcharts
MilConDoin
MilConDoin

Reputation: 745

Highstock/Highcharts - yAxis Label top

Using Highstock or Highcharts, I want my yAxis label on the top. What I don't want, is a varying margin between the left border of the chart and the beginning of the grid lines.

If you take a look at the following fiddle: JSFiddle

Relevant part is:

yAxis: {
    title: {
        align: 'high',
        offset: 0,
        text: 'Rainfall (mm)',
        rotation: 0,
        y: -10
    }
}

This is almost correct, but the offset margin is taken from the label width. If I set offset: -41 instead, it looks exactly right. The problem is, that the -41 is due to the rendered length of the text. If I change the text to something of a different length, the label is positioned wrongly again.

Is there any possibility to make sure, that the positions are always "correct" in my above definition of correct, regardless of the text length?

Screenshot, left part is wrong, right part is correct:

Display Difference

Upvotes: 0

Views: 1346

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that you can use text-anchor property to style your title. Here you can find more information about text-anchor property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

  title: {
    align: 'high',
    text: 'Rainfall (mm)',
    style: {
      'text-anchor': 'start'
    },
    rotation: 0,
    y: -10,
    x: -25
  },

I think that you need to use chart.marginLeft parameter as well. It will give you a chance to set specific left margin for your chart. Here you can find information about it. http://api.highcharts.com/highcharts#chart.marginLeft

You may also use xAxis.labels.reserveSpace parameter to turn off reserving space for labels: http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace

Here you can find live example how your chart can work with this options: http://jsfiddle.net/Ljwp7694/

Kind regards,

Upvotes: 1

Related Questions