gistfile1.txt

.content style='background-color:#f5f5f6; width: 725px; height:1000px'
  #chart1 style='width:680px; height: 375px;'
  #centerText style="position:absolute; left:0px; top:0px;"

  #chart2 style='width:680px; height: 235px; margin-top:10px'

javascript:
 
  $(document).ready(function () {
    //data vars in millions
    var _announced = 45050;
    var _notAnnounced = 143218;
    var _contracted = 30889;

    var suffix = " млн ₽";
    // Build the chart
    var chart1 = new Highcharts.Chart({
      chart: {
        renderTo: 'chart1'
      },
      title: {
        text: ''
      },
      tooltip: {
        enabled: false
      },
      legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        floating: true,
        x: 375,
        y: 150,
        useHTML: true,
        itemMarginBottom: 10,
        labelFormatter: function () {
          return '<div style="width: 250px">' +
                  '<div class = "legend-series-name" style="float: left; width: 150px; white-space: normal">' + this.name + '</div>' +
                  '<div style="text-align: right; float: right; width: 100px;"> ' + (this.y) + suffix+'</div></div>';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: false,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          showInLegend: true
        }
      },
      series: [{
        type: 'pie',
        innerSize: '65%',
        center: ['25%', '50%'],
        size: '75%',
        name: 'Распределение по статусам',
        data: [
          ['Объявлено', _announced],
          ['Осталось объявить', _notAnnounced]
        ]
      },
        {
          type: 'pie',
          innerSize: '80%',
          center: ['25%', '50%'],
          size: '95%',
          endAngle: calcEndAngle(_contracted, _announced + _notAnnounced),
          name: 'Распределение по статусам',
          data: [
            {
              name: 'Заключено',
              y: _contracted,
              color: '#a80504'
            }
          ]
        }]
    });
    //довольно кривое решение для вывода текста внутри бублика, но лучше не нашел. ХЗ как будет работать на резиновой верстке.
    var textX = chart1.plotLeft + (chart1.plotWidth * 0.25);
    var textY = chart1.plotTop + (chart1.plotHeight * 0.5);

    var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;font-size: 20px;color:#859097 ">';
    span += '<span>Всего</span><br>';
    span += '<span>запланировано</span><br>';
    span += '<span style="font-weight: bold">'+(_announced+_notAnnounced)+suffix+'</span>';
    span += '</span>';

    $("#centerText").append(span);
    span = $('#pieChartInfoText');
    span.css('left', textX + (span.width() * -0.5));
    span.css('top', textY + (span.height() * -0.5));

    // конец первого графика на первой странице

  })