Как поменять легенду моего гистограммы в angular

Question

Как изменить положение легенды сверху вниз на графике nvd3.

 options = {
"chart": {
  "type": "multiBarChart",
  "height": 300,
  "margin": {
    "top": 20,
    "right": 20,
    "bottom": 45,
    "left": 45
  },
  "clipEdge": true,
  "duration": 500,
  "stacked": false,
  "xAxis": {
    // "axisLabel": "Time (ms)",
    "showMaxMin": false
  },
  "yAxis": {
    // "axisLabel": "Y Axis",
    "axisLabelDistance": -20,
    tickFormat:
      function (d) {
        return d3.format('0f')(d);
      }

  },
  showControls: false,
  color: ["#71B84F", "#FFC300"],
}

ссылка, которую я использую для создания гистограммы , https://krispo.github.io/angular-nvd3/# / multiBarChart

Answer 1

Вам необходимо добавить: legendPosition: 'bottom'

Пример:

 options = {
"chart": {
  "type": "multiBarChart",
  "height": 300,
  "margin": {
    "top": 20,
    "right": 20,
    "bottom": 45,
    "left": 45
  },
  "clipEdge": true,
  "duration": 500,
  "stacked": false,
  "xAxis": {
    // "axisLabel": "Time (ms)",
    "showMaxMin": false
  },
  "yAxis": {
    // "axisLabel": "Y Axis",
    "axisLabelDistance": -20,
    tickFormat:
      function (d) {
        return d3.format('0f')(d);
      }

  },
  showControls: false,
  color: ["#71B84F", "#FFC300"],
  legend: {
      margin: {
        top: 5, right: 1, bottom: 1, left: 1
      },            
  },
  legendPosition: 'bottom'
}

Answer 2

В отличие от других типов диаграмм, multiBarChart не имеет свойства legendPosition. Поэтому вам нужно определить legend.margin и поиграть со значениями top и bottom.

chart: {
  ...
  legend: {
    margin : {
      top: 220,
      right: 20,
      bottom: 20,
      left: 45
    }
  },
  ...