Highcharts с размещением React Legend и др

поэтому я недавно познакомился с Highcharts и создал жестко запрограммированную фиктивную диаграмму в своем приложении. Однако у меня возникли проблемы с указанием размещения именно кругов ЛЕГЕНДЫ. Итак, вот ссылка, которую я черпал из кода + вдохновение: https://github.com/whawker/react-jsx-highcharts/blob/gh-pages/examples/Combo/App.js

А вот и мой код :)

  render() {
    const pieData = [
      {
        name: "Jane",
        y: 17
      },
      {
        name: "John",
        y: 13
      },
      {
        name: "Joe",
        y: 20
      },
      {
        name: "Ivan",
        y: 50
      }
    ];

    return (
      <HighchartsChart>


        <Legend />

        <YAxis id = "number">
          <PieSeries
            id = "total-consumption"
            name = "Total consumption"
            data = {pieData}
            center = {[300, 120]}
            size = {255}
            showInLegend

          />
        </YAxis>
      </HighchartsChart>
    );

так что в основном да, мне нужно, чтобы легенда двигалась снизу вправо и т. д., а также я не уверен, как манипулировать / отображать значения вместо имен на самой диаграмме. Заранее благодарим за ЛЮБЫЕ отзывы и советы, С уважением , Виктор (все еще сбитый с толку стажер)