Remove minutes in a tornado/bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Remove minutes in a tornado/bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <canvas id="bar-chart-horizontal" width="800" height="450"></canvas> 
      <div class="row justify-content-between"> 
         <a href="#">Very clear</a>
          | /*from   w  w  w. j  av a  2s . c o  m*/
         <a href="#">Clear</a>
          | 
         <a href="#">Moderate</a>
          | 
         <a href="#">Unclear</a>
          | 
         <a href="#">Moderate</a>
          | 
         <a href="#">Clear</a>
          | 
         <a href="#">Very clear</a> 
      </div> 
      <script>
new Chart(document.getElementById("bar-chart-horizontal"), {
    type: 'horizontalBar',
    data: {
        labels: ["", "", "", ""],
        datasets: [
            {
                label: "Strenght",
                backgroundColor: ["#004070", "#ff2384", "#004070", "#ff2384"],
                data: [61, 35, -29, 13]
            }
        ]
    },
    options: {
        legend: { display: false },
        title: {
            display: true,
            text: 'Score'
        },
        scales: {
            xAxes: [{
                ticks: {
                    suggestedMin: -100,
                    suggestedMax: 100,
                    callback: value => value.toString().replace('-', '')
                }
            }]
        }
    }
});

      </script>  
   </body>
</html>

Related Tutorials