Диаграмма не центрирована

#javascript #html #css #vue.js #charts

#javascript #HTML #css #vue.js #Диаграммы

Вопрос:

Когда на моей диаграмме нет загруженных данных, она идеально центрируется и содержится внутри своего элемента, но когда на диаграмме есть данные, диаграмма сдвигается вправо и становится меньше

Мои варианты для диаграммы:

 options: {
    responsive: false,
    maintainAspectRatio: false,
    barRoundness: 1,
    scaleShowValues: true,
    scales: {
      xAxes: [
        {
          barThickness: 6,
          stacked: true,
          ticks: {
            autoSkip: false,
            fontSize: 9
          },
          gridLines: { display: false }
        }
      ],
      yAxes: [{ stacked: false, gridLines: { display: false } }]
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    }
  }
  

Где я это реализую:

 <div v-if="loadedMatch" class="graph mt-2 rounded">
    <newgraph :width="327" :height="312" :bets="this.betsForMatch"
    v-if="loadedBets"
    v-on:barInteracted="onBarInteracted"/>
</div>
  

Результат

Я хочу, чтобы диаграмма заполняла все пустое пространство

Я использую vue-chart.js версия Chart.js . Извините, если я не предоставляю достаточно информации с самого начала.

Ответ №1:

Из-за меток для отметок по оси x диаграмма сдвинулась влево. Итак, мне нужно установить галочки по оси x