Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.9.2/Chart.bundle.min.js"></script>
<body>  
  <div class="graph_container">
    <canvas id="chart" width="800" height="800"></canvas>
  </div>
</body>
</html>
 
.graph_container{
  display:block;
  width:700px;
}
 
var chartData = {
  datasets: [{
    type: 'line',
    label: 'Line',
    borderColor: 'blue',
    borderWidth: 2,
    fill: false,
    data: [{x:0,y:100},{x:1,y:20},{x:2,y:36},{x:3,y:18},{x:4,y:90},{x:5,y:100}],
  }, {
    type: 'bar',
    label: 'Red Bar',
    borderColor: 'black',
    borderWidth: 1,
    backgroundColor: 'rgba(128,0,0,0.2)',
    data: [{x:0,y:100},{x:1,y:100},{x:2,y:100}],
  }, {
    type: 'bar',
    label: 'Green Bar',
    backgroundColor: 'rgba(0,128,0,0.2)',   
    borderColor: 'black',
    borderWidth: 1,
    data: [{x:4,y:100},{x:5,y:100}],
  }, {
    type: 'bar',
    label: 'FloatingBars',
    backgroundColor: 'rgba(128,128,0,0.5)',   
    borderColor: 'black',
    borderWidth: 1,
    data: [[5,16], [23,46]],
  },
 ]
};
​
var labels = []
var counter = 6
​
for (var i = 0; i < counter; i++) {
  labels.push(i)
}
chartData.labels = labels
​
​
var ctx = document.getElementById('chart').getContext('2d');
myMixedChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    responsive: true,
    spanGaps: true,
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      xAxes: [{
        barThickness: 100, // number (pixels) or 'flex'
        maxBarThickness: 100, // number (pixels)
        barPercentage: 1.0,
        categoryPercentage: 1.0,
        gridLines: {
          display: false
        },
        // stacked: true
      }],
      yAxes: [{
        // stacked: true
      }],
    }
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers