adding ChartDataLabels
This commit is contained in:
@@ -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'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user