Align rotated text to left of chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Align rotated text to left of chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>line chart with ChartJS</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
      <style id="compiled-css" type="text/css">

.ylabel {/*from w w w .  ja  va 2  s . co  m*/
   float: left;
   position: absolute;
   margin-top: 60px;
   text-align: center;
   /* Rotate div */
   -ms-transform: rotate(270deg);
   /* IE 9 */
   -webkit-transform: rotate(270deg);
   /* Chrome, Safari, Opera */
   transform-origin: 0% 50%;
   transform: rotate(270deg) translate(-25%, -50%);
}
? .radar-chart-sz {
   padding-left: 0 !important;
   margin-top: 20px;
}
.k-livestat_box {
   margin: 15px 2.5px;
   padding: 25px;
   min-height: 458px;
   max-width: 100%;
   background-color: #1A284B;
   color: #C3CF01;
   border: 1px solid #162444;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
    var scaling = [10, 10, 10, 1, 1, 1, 1];
    var data = {
      labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
      datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [5, 5, 9, 81, 56, 55, 40]
      }]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var myRadarChart = new Chart(ctx).Line(data);
    }

      </script> 
   </head> 
   <body> 
      <div class="container"> 
         <div class="row"> 
            <div class="col-sm-4"> 
               <div class="k-livestat_box"> 
                  <h3>Speed Status</h3> 
                  <hr> 
                  <div class="radar-chart-sz"> 
                     <!--Line Speed Chart --> 
                     <label class="ylabel">Speed ( mph )</label> 
                     <canvas id="lineChart"></canvas> 
                  </div> 
                  <h4 id="currentspeed">Current Speed ( mph ): 100</h4> 
                  <h4 id="topspeed">Highest Speed ( mph ): 100</h4> 
                  <h4 id="lowspeed">Lowest Speed ( mph ): 100</h4> 
                  <h4 id="avgspeed">Average Speed ( mph ): 100</h4> 
               </div> 
            </div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials