1

I am drawing several plotbands in a chart, and each bands has its labels.

but when the timerange is changed to all time, the plotband turns to be to narrow to contain the whole label, so the labels overlaps on each other.

Can I disable plotband's label when it exceeds plotband's border？How?

Dodou Wang
  • 29
  • 7

1 Answers1

4

You can check if the label width is bigger then plot band width on afterSetExtremes event and if so hide it by setting its opacity to 0.

Function for toggling labels opacity:

function togglePlotbands() {
  this.plotLinesAndBands.forEach(plotband => {
    const { plotLeft, plotWidth } = this.chart
    const from = Math.max(this.toPixels(plotband.options.from), plotLeft)
    const to = Math.min(this.toPixels(plotband.options.to), plotLeft + plotWidth)

    const plotbandWidth = to - from
    const show = plotband.label.getBBox().width < plotbandWidth

    plotband.label.css({ opacity: Number(show) })
  })
}

Call on afterSetExtremes:

events: {
  afterSetExtremes: togglePlotbands
}

Optionally on chart load:

chart: {
  events: {
    load: function() {
      togglePlotbands.call(this.xAxis[0])
    }
  }
},

example: http://jsfiddle.net/r89r2sr0/

morganfree
  • 12,254
  • 1
  • 14
  • 21
  • I have found a problem: this method is not valid in IE7. I have already transfer your ES6 code to ES5, and use it in my website: [link](http://www.qidiantu.com/tmp2.html) . In Firefox, it works all right, but in IE7, the long label text still shows out of the plotband, what's more, when I use mouse to select a certain area in xAxis, the selecting cannnot be stoped by the second click. Can you help me to find why? @morganfree Thanks. – Dodou Wang Jul 16 '17 at 11:30
  • Opacity is not fully supported in ie7 https://stackoverflow.com/questions/2944022/css-opacity-not-working-in-ie7 In this case you can use visibility attribute which is supported by ie6+ (toggle visible|hidden). I do not know what you mean by stopping selection by the second click - I do not see it in the original question. – morganfree Jul 17 '17 at 12:25
  • "the selection is never stoped by the second click". Sorry I didn't express it correctly, I means: When I wanna select an area in the chart, I need to first click at the start position, the move the mouse to the end position, then release the mouse. But In IE7, the release will cause another selection to start, so it never ends. @morganfree – Dodou Wang Jul 18 '17 at 06:00
  • And, is Opacity has relation with this problem? It seems that your answer didn't use it. Sorry I haven't understood why you mentioned it. @morganfree – Dodou Wang Jul 18 '17 at 06:02
  • 1
    Yes, it is used in togglePlotbands function. You can replace opacity with visibility which should work in ie7 - http://jsfiddle.net/r89r2sr0/1/ – morganfree Jul 18 '17 at 12:18