adding ChartDataLabels

This commit is contained in:
frankknoll
2023-06-07 17:50:01 +02:00
parent 5050a4b9c5
commit f31ade23c7
2 changed files with 20 additions and 8 deletions

View File

@@ -16,6 +16,7 @@ class BatchcodeByCountryBarChartView2 {
this.#canvas, this.#canvas,
{ {
type: 'bar', type: 'bar',
plugins: [ChartDataLabels],
data: this.#getData(barChartDescription), data: this.#getData(barChartDescription),
options: this.#getOptions() options: this.#getOptions()
}); });
@@ -45,16 +46,19 @@ class BatchcodeByCountryBarChartView2 {
#getOptions() { #getOptions() {
return { return {
indexAxis: 'y', plugins: {
responsive: true, datalabels: {
scales: { anchor: 'end',
y: { align: 'top'
title: {
display: true,
text: 'Country'
} }
}, },
x: { title: {
display: true,
position: 'top'
},
scales: {
y: {
// FK-TODO: im main branch und pages branch in AdverseReactionReportsChartView.js wie hier "precision: 0" setzen
ticks: { ticks: {
precision: 0 precision: 0
}, },
@@ -62,6 +66,12 @@ class BatchcodeByCountryBarChartView2 {
display: true, display: true,
text: 'Frequency' text: 'Frequency'
} }
},
x: {
title: {
display: true,
text: 'Country'
}
} }
} }
}; };

View File

@@ -19,6 +19,8 @@
<script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js" <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
type="text/javascript"></script> type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<script
src=" https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js "></script>
<script src="./Utils.js"></script> <script src="./Utils.js"></script>
<script src="./UIUtils.js"></script> <script src="./UIUtils.js"></script>
<script src="./ColumnSearch.js"></script> <script src="./ColumnSearch.js"></script>