CODEWITHSUNDEEP
highcharts
arbghl
arbghl

Reputation: 368

Highcharts legend is overlapping on to the graph area

I'm using highcharts to plot out a line graph of quite a few sections. I want the legend to be static at the bottom of the graph area. The height of the graph area can be fixed but the legends can change dynamically.

I'm using the below options in for legend object

legend: {
        
        useHTML: true,
        enabled: true,
        reversed: false,
        verticalAlign: 'bottom',
        floating: true,                              
        align: 'center',
        padding: 10,
        margin: 20,
        itemDistance: 10,
        itemStyle: {
            'font-size': '14px',
            'color': colors.greyDark,
            'font-family': fonts.proximaNovaBold,
            'letter-spacing': '0',
            'line-height': '17px',
            'text-align': 'center',
        },
        itemMarginBottom: 10,
        x: 0,
        y: 100
    },

I have replicated it in the fiddle https://jsfiddle.net/x496tLmf/1/

Is there any way to fix this and have the legends stuck to the bottom. All of them need to display as the graph will be exported as static image.

Upvotes: 1

Views: 1854

Answers (1)

Karol Kołodziej
Karol Kołodziej

Reputation: 672

There are two main issues why the legend overlaps the chart:

  1. When you manually set the chart margin, the chart won't reserve space for the legend.
  2. When you enable the legend floating option, you explicitly allow legend for overlapping
    API: https://api.highcharts.com/highcharts/legend.floating

The solution here is to remove the properties mentioned before and let the chart calculate the position of the legend. However when you want to export this chart as a static image with all the legend items you have to specify the size of each element together with some overflow style to cut them a bit. You might also reduce the spacing in between them, to increase the chart area.

legend: {
  useHTML: true,
  enabled: true,
  reversed: false,
  itemWidth:120,
  itemStyle: {
    'font-size': '14px',
    'color': colors.greyDark,
    'font-family': fonts.proximaNovaBold,
    'letter-spacing': '0',
    'line-height': '17px',
    'text-align': 'center',
          "textOverflow": "ellipsis"
  },

},

API: https://api.highcharts.com/highcharts/legend.itemWidth
Live demo: https://jsfiddle.net/BlackLabel/ef8rjkmL/

Upvotes: 8

Related Questions