Search code examples
javascripthighchartsrenderer

How can a text box be bound dynamically to the right border of a chart created with Highcharts?

currently, I'm working on creating charts dynamically, using Highcharts. My goal is to add a custom footer at the bottom of the chart. This is currently achieved by using the chart.renderer to draw a rectangle first. Secondly, the renderer draws two textboxes on top of the rectangle, which should align left and right respectively, within the rectangle.

Example:

Example of custom Footer in Highcharts

Now, the text lengths vary between charts. The position of the text boxes cannot be set as a constant, it needs to be generated dynamically. This is, where I'm stuck. The left text box is not a problem, its starting y-coordinate can be set as a constant while its x-coordinate can be calculated by the charts Height.

The right text box on the other hand is a problem. Its starting y-coordinate can be set similar to the other text box. But its starting x-coordinate needs to be calculated, depending on the length of the text in a matter that, ideally, the gap between the end of the text and the right border of the chart/rectangle is always the same.

There is a JSFiddle here (which is just a minimally extended fiddle of one of the Highcharts demos (thanks to Torstein Hønsi).

This line of code is where I need the correctly calculated x-coordinate (replacing "this.chartWidth-250"):

chart.renderer.text('This is some other text which varies in length.', this.chartWidth-250, this.chartHeight-7)


Highcharts.chart('container', {
        chart: {
            borderWidth: 0.75,
        borderColor: '#B3B3B3'
    },

        credits: {
                enabled: false
        },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function (chart) { // on complete

    chart.renderer.rect(0, this.chartHeight-20, this.chartWidth-1, 20, 1)
            .attr({
                fill: '#B3B3B3',
                zIndex: 2
        })
        .add();

    chart.renderer.text('This is some text.', 10, this.chartHeight-7)
            .css({
                color: 'green',
            fontSize: '8pt',
            font: 'Arial, sans-serif'
        })
        .attr({
                zIndex: 3
        })
        .add();
     
    chart.renderer.text('This is some other text which varies in length.', this.chartWidth-250, this.chartHeight-7)
            .css({
                color: 'red',
            fontSize: '8pt',
            font: 'Arial, sans-serif'
        })
        .attr({
                zIndex: 3
        })
        .add();
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px;width: 400px"></div>

Solution

  • Try using text-anchor: end attribute.

    For better results, use the same values 10 on x like below

    chart.renderer.text('left', 10, this.chartHeight - 7)
chart.renderer.text('right', this.chartWidth - 10, this.chartHeight - 7)


    Highcharts.chart('container', {
  chart: {
    borderWidth: 0.75,
    borderColor: '#B3B3B3'
  },

  credits: {
    enabled: false
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]

}, function(chart) { // on complete

  chart.renderer.rect(0, this.chartHeight - 20, this.chartWidth - 1, 20, 1)
    .attr({
      fill: '#B3B3B3',
      zIndex: 2
    })
    .add();

  chart.renderer.text('This is some text.', 10, this.chartHeight - 7)
    .css({
      color: 'green',
      fontSize: '8pt',
      font: 'Arial, sans-serif'
    })
    .attr({
      zIndex: 3
    })
    .add();

  chart.renderer.text('This is some other text which varies in length.', this.chartWidth - 10, this.chartHeight - 7)
    .css({
      color: 'red',
      fontSize: '8pt',
      font: 'Arial, sans-serif'
    })
    .attr({
      'text-anchor': 'end',
      zIndex: 3
    })
    .add();
});
    <script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px;width: 400px"></div>