Morris charts different preUnits - morris.js

Question

Is it possible to have different preUnits for Morris Line chart?
Here is my javascript:
Morris.Line({
element: 'payment_chart',
data: json.data,
xkey: 'm',
ykeys: json.label,
labels: json.label,
parseTime: false,
preUnits: "$",
smooth: true,
resize: true
});
I have just two lines, one represents Dollar value, the other quantity. My tooltip looks like:
April
Sales: $3
Amount: $249.99
What I would like to do is remove dollar sign from sales.

Answer 1

No you can't have different preUnits for Morris Line chart:
preUnits: Set to a string value (eg: '$') to add a label prefix all y-labels.
But you can set the hoverCallback function to do the job:
Morris.Line({
element: 'payment_chart',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Sales', 'Amount'],
parseTime: false,
preUnits: "$",
smooth: true,
resize: true,
hoverCallback: function (index, options, content, row) {
var indexAmount = 2;
var txtToReplace = $(content)[indexAmount].textContent;
return content.replace(txtToReplace, txtToReplace.replace(options.preUnits, ""));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="payment_chart"></div>