jQuery Sparklines with CSS Transform

Question

I'm using jQuery Sparklines on an html page which is scaled using transform: scale. Unfortunately, this causes the tooltip generated by jQuery Sparklines to be displayed in the wrong spot. For example, the following code...

<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>

... results in this:

Is there some way to fix this behaviour?

Santhosh · Accepted Answer · 2017-10-23T09:19:45.297

2

Rename your style from "body" to "div" it will work.

As the transfer:scale is affecting the whole page, we need to specify to the specific div tag.

edited Oct 23 '17 at 09:19

answered Oct 23 '17 at 09:12

Santhosh

142
6

score 1 · Answer 2 · answered Oct 23 '17 at 09:29

The Problem is you have specified the transform to total body so only its getting affected give the transform css to particular div or use :not selector in css

Here the fiddle Link:https://jsfiddle.net/hahkarthick/3v0s0xvm/

  $(function() {
    var myvalues = [10,8,5,7,4,4,10];
    $('#line').sparkline(myvalues, {
        type: 'line'
    });
});

div:not(span){
   transform: scale(0.7); 
   transform-origin: 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.js"></script>
<div> random text random random text random text <span id="line"></span>  </div>

jQuery Sparklines with CSS Transform

2 Answers2