Как я могу добавить внутренние отступы в область графика моей верхней диаграммы / верхней диаграммы?

Question

У меня есть диаграмма, которая должна соответствовать от конца до конца сенсорного экрана.Я смог сделать это, уменьшив отступ левой и правой сторон графика, чтобы он соответствовал контейнеру.

 chart: {
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
 }

Я также хочу оставить пробел или отступ между метками yAxis и данными графика, поэтому я использовал значение x метки yAxis, чтобы попытаться предотвратить наложение данных.Затем я добавил marginRight, чтобы сделать его видимым:

 chart: {
    marginRight: 45,
 }
 yAxis: {
    labels: {
      align: 'right',
      x: 30
    },
 }

Проблема в том, что это заставляет навигатор сжиматься.

Как мне получить мою диаграмму:

• остаться от начала до конца содержащего div
• с заполнением области графика yAxis (чтобы точки графика не перекрывали метки yAxis)
• и сохранить ширину навигатора для полной ширины контейнера?

jsFiddle, чтобы продемонстрировать пример

Answer 1

Вам не нужно устанавливать свойство chart.marginRight, потому что (как вы можете видеть сейчас, и вы можете прочитать в документации), оно создает свободное пространство между краем диаграммы и областью графика, поэтому навигаторимеет то же самое, что и другие элементы диаграммы.

Чтобы добиться необходимого эффекта, просто установите для всех полей значение 0, а затем установите свойство width, например, равное 95% на каждой оси Y и X (в данном случае три оси).Он должен дать вам то, что вам нужно.

  chart: {
     margin: 0
  },
  yAxis: [{
    labels: {
      align: 'right',
      x: 30
    },
    height: '60%',
    lineWidth: 2,
    resize: {
      enabled: true
    },
    width: '95%'
  }, {
    labels: {
      align: 'right',
      x: 30
    },
    top: '65%',
    height: '35%',
    width: '95%',
    offset: 0,
    lineWidth: 2
  }],
  xAxis: {
    width: '95%'
  },

Живой пример: https://jsfiddle.net/5zxodeb0/