Rotate bullet graph vertically

Turn a bullet graph vertically


Example 1

html
<div class='thermometer1'> <SpotfireControl id="4e93c6fb1408420cbdf20066dceaa8ed" /></div>

<style>
.thermometer1{
    width: 200px; 
    height: 50px; 
    margin-top: 123px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* transform: rotate(90deg); */
    /* text-align: center; */
}
.thermometer1 img{
    padding:10px;
width:20px;
    background-color: #fff;
    box-shadow: -5px 2px 13px 3px #8a6b6b;
    border-radius: 20px;
}
</style>




Example 2
No labels, no shadow

html

<div class='thermometer2 shadow'> <SpotfireControl id="4e93c6fb1408420cbdf20066dceaa8ed" /></div>


<style>
.thermometer2{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);

    /*position*/
    width: 100px; 
    margin-top: 100px;
}

/*height, width*/
.thermometer2 img{
    width: 140px !important; 
    height: 30px !important; 
    border-radius: 100px;
    /*box-shadow: -5px 5px 25px 2px #8a6b6b;*/  /*optional*/

}

</style>