Как переместить ось x, в Chart.js, в точку 0 оси координат x-y?

Question

[BB 8]

Answer 1

[alexalexes]

https://code.tutsplus.com/ru/tutorials/getting-sta...
Обратите внимание на этот пример:

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5,
      gridLines: {
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        zeroLineColor: "black",
        zeroLineWidth: 2
      },
      ticks: {
        min: 0,
        max: 6500,
        stepSize: 1300
      },
      scaleLabel: {
        display: true,
        labelString: "Density in kg/m3"
      }
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

В особенности, на свойства gridLines и ticks у xAxes.
Прописывая данные свойства у себя в примере и отрегулировав числовые параметры, вы сможете добиться желаемого положения и отображения осей.

Comments

[BB 8]

Спасибо за ссылку, ticks отвечает за min/max значения, а как менять положение оси ? Там нет примера со смещением оси x на (n)px выше/ниже.

[alexalexes]

Ну, так задайте цвет и ширину линии оси параметром gridLines, в ticks подставьте вычисленные min и max. Если сделаете их равными по модулю, но разные по знаку, то ось окажется где-то посередине. Чарту все равно, где располагаются оси (у него нету "align: center"), важно лишь как обозначена прямоугольная область отображения по параметрам min и max.

[BB 8]

alexalexes, Благодарю за ответ, проверю.

[BB 8]

alexalexes, min и max смещает ось только во втором графике, в первом - нет. В чем может быть проблема?

codepen