如何在highchart中将标题html div与图表水平对齐？

Question

Consider the following jsfiddle

I am trying to align the gap between title bottom-border and the chart. Preferably the left side and right side of the chart aligns with the left side and right side of title border respectively.

Is there anyway I can do that without hardcoding (my chart width changes relative to screen size)?

Answer 1

You can force the title to have the same width and left offset as the plot area. To make sure it's responsive use the render event:

chart: {
  plotBorderWidth: 1,
  events: {
    render: function() {
      var style = this.title.element.style;
      style.left = this.plotLeft + 'px';
      style.width = this.plotWidth + 'px';
    }
  }
}

Live working demo: http://jsfiddle.net/kkulig/y3fj6vpq/

API reference: https://api.highcharts.com/highcharts/chart.events.render

Answer 2

Change these two properties of the title.

left: 77px;
width: 922px;