ChartJS: como fazer um gráfico de barras com uma diretriz horizontal: - javascript, gráficos, chart.js, meteorografias

É possível fazer um gráfico como o exemplo abaixo?

Eu não consegui encontrar um exemplo com umsobreposição. Eu estou usando isso no contexto de um plugin de atmosfera dentro de uma aplicação de meteoro, então pode não ser possível adicionar facilmente plugins à minha instância de chartjs.

Eu já construí alguns gráficos, então porpor essa razão, é minha forte preferência fazer isso funcionar ao mudar para outra biblioteca de gráficos, mas não é tarde demais para abri-los, se não houver outra maneira de fazer isso funcionar.

Respostas:

Você poderia estender o gráfico de barras para adicionar a linha horizontal

Chart.types.Bar.extend({
name: "BarLine",
draw: function () {

Chart.types.Bar.prototype.draw.apply(this, arguments);

var scale = this.scale,
barHeight = this.scale.calculateY(83);


// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(30, barHeight);

this.chart.ctx.strokeStyle = "#ff0000";
this.chart.ctx.lineWidth = 3;
this.chart.ctx.lineTo(this.chart.width, barHeight);
this.chart.ctx.stroke();

// write Label Text
this.chart.ctx.fillStyle = "#000000";
var text = this.options.labelText ? this.options.labelText : "DEFAULT TEXT"
this.chart.ctx.textAlign = "center";
this.chart.ctx.font = "22px Arial";
this.chart.ctx.fillText(text, this.chart.width  * 0.5, 95);
this.chart.ctx.closePath();

}
});`

Você pode adicionar os valores da barra na função de desenho, mas eu geralmente faço isso na função "onanimationcomplete" para o gráfico, da seguinte forma:

resultChart = new Chart(resultGraphCanvas.getContext("2d")).BarLine(chart, {

scaleBeginAtZero: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
maintainAspectRatio: false,
labelText: "TEST DRAWN NEAR THE LINE",

showTooltips: false, //Needs to be set to false for the onAnimationComplete drawing to persist
onAnimationComplete: function () {


var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";

this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {

ctx.fillText(bar.value, bar.x, bar.y );
});
})
},
});

Isso vai desenhar os valores no topo das barras, eu vou deixar posicionando-os em outro lugar para você :)