HighCharts fitting long Y-axis labels

0
votes

I have some big vertical(Y) axis label names. When they are displayed, they shrink the size of the actual chart and reading them becomes confusing. Here is the image:

enter image description here

As can be seen in the image, the labels are unaligned. How to make them properly align?

Here are the chart options I am using: 

{
  "plotOptions": {
    "series": {
      "pointPadding": 0,
      "borderWidth": 0
    }
  },
  "chart": {
    "height": "50%"
  },
  "rangeSelector": {
    "selected": 1
  },
  "title": {
    "text": "Index EOD Analysis"
  },
  "tooltip": {
    "split": true
  },
  "yAxis": [
    {
      "labels": {
        "align": "right",
        "x": -3
      },
      "title": {
        "text": "OHLC"
      },
      "height": "60%"
    },
    {
      "labels": {
        "align": "right",
        "x": -3
      },
      "height": "20%",
      "top": "60%",
      "title": {
        "text": "FII Consolidated PCR"
      }
    },
    {
      "labels": {
        "align": "right",
        "x": -3
      },
      "height": "20%",
      "top": "80%",
      "title": {
        "text": "Net Seller Index"
      }
    }
  ],
  "series": [
    {...}
  ]
1
highcharts

1 Answers

1
votes

You can increase a width of the labels:

"yAxis": [...,
    {
        ...
        "title": {
            ...,
            style: {
                width: '200px'
            }
        }
    }
]

Live demo: http://jsfiddle.net/BlackLabel/eb4g6rtc/

API Reference: https://api.highcharts.com/highcharts/yAxis.title.style