Изменить положение меток Tick.js

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

Во-первых, скрыть линии yAxesи xAxesсетки и отметьте метки следующим кодом:

gridLines: {
    display: false,
    drawBorder: false //hide the chart edge line
},
ticks: {
    display: false
}

Затем, основываясь на приведенной здесь идее , используйте следующий код bar._model.label, чтобы добавить в верхнюю часть панели:animation: { duration: 1, onComplete: function() { var chartInstance = this.chart; ctx.font = Chart.helpers.fontString(16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); this.data.datasets.forEach(function(dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); meta.data.forEach(function(bar, index) { var label = bar._model.label; var xOffset = 10; var yOffset = bar._model.y - 42; ctx.fillText(label, xOffset, yOffset); }); }); } }

ticks

Анимация JSFiddle Демо: https://jsfiddle.net/actxg695/1/

---

Если у вас все в порядке с ярлыками, отображаемыми на панели, а не сверху на панели, вместо того, чтобы скрывать animationи использовать animation, вы можете просто щелкнуть ярлыки меток над yAxes, используя mirror:true:

ticks: {
    mirror: true,
    fontSize: 16, //make the font slightly larger
    padding: -10 //move the text slightly away from the bar edge
}

Демо-версия Mirror JSFiddle: https://jsfiddle.net/actxg695/2/