I've incorporated jQuery Sparklines into an html page that I've resized using the transform: scale property. However, this adjustment has caused the jQuery Sparklines tooltip to appear in the incorrect location.
For instance, consider the code snippet below...
<style>
body {
transform: scale(0.7);
transform-origin: 0 0;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.sparkline.min.js"></script>
<script type="text/javascript">
$(function() {
var myvalues = [10,8,5,7,4,4,10];
$('#line').sparkline(myvalues, {
type: 'line'
});
});
</script>
<div> random text random text random text random text random text random text <span id="line"></span> </div>
This leads to the following output:
https://i.sstatic.net/YERkt.png
Is there a solution to rectify this behavior?