74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import { Controller } from '@hotwired/stimulus'
|
|
import { Chart, BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js'
|
|
|
|
Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend)
|
|
|
|
/* stimulusFetch: 'lazy' */
|
|
export default class extends Controller {
|
|
|
|
static targets = ['canvas']
|
|
static values = {
|
|
labels: Array,
|
|
data: Array,
|
|
title: String,
|
|
color: { type: String, default: '#004b7a' },
|
|
maxY: { type: Number, default: 5 },
|
|
}
|
|
|
|
connect() {
|
|
this.chart = new Chart(this.canvasTarget, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: this.labelsValue,
|
|
datasets: [{
|
|
label: 'Frage',
|
|
data: this.dataValue,
|
|
backgroundColor: this.colorValue,
|
|
borderWidth: 0,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.parsed.y.toFixed(2)
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
display: !!this.titleValue,
|
|
text: this.titleValue,
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
min: 1,
|
|
max: this.maxYValue,
|
|
ticks: {
|
|
stepSize: 1,
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
disconnect() {
|
|
if (this.chart) {
|
|
this.chart.destroy()
|
|
}
|
|
}
|
|
}
|