Hi, sorry but with that chart you can only show values on Hover, but you can set the hideHover to false, so it will show at least one value of the chart and when you hover it will show for each column.
Also, for currency, make the following changes:
Change the HTML to:
<!-- Morris: Bar -->
<div class="chart chart-md" id="morrisBar100"></div>
<script type="text/javascript">
var morrisBarData100 = [{
y: '2018',
a: 2508,
b: 104
}, {
y: '2019',
a: 2431,
b: 101
}, {
y: '2020',
a: 2398,
b: 139
}, {
y: '2021',
a: 3769,
b: 469
}, {
y: '2022',
a: 3982,
b: 658
}];
// See: js/examples/examples.charts.js for more settings.
</script>
JS:
(js/custom.js)
(function($) {
'use strict';
/*
Morris: Bar
*/
if( $('#morrisBar100').get(0) ) {
Morris.Bar({
resize: true,
element: 'morrisBar100',
data: morrisBarData100,
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Revenues', 'Net income'],
hideHover: false,
barColors: ['#0088cc', '#325f8c'],
parseTime: false,
preUnits: "$",
smooth: true,
hoverCallback: function (index, options, content, row) {
var indexAmount = 2;
var txtToReplace = $(content)[indexAmount].textContent;
return content.replace(txtToReplace, txtToReplace.replace(options.preUnits, ""));
}
});
}
}).apply(this, [jQuery]);
More details: https://morrisjs.github.io/morris.js/bars.html
Kind Regards.