Chart.js #5622

by Akihiko Kusanagi

HTML

<script src="https://rawgit.com/nagix/nagix.github.io/chartjs/Chart.5622.js"></script>
<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>
<canvas id="myChart3"></canvas>
<canvas id="myChart4"></canvas>
<canvas id="myChart5"></canvas>

JavaScript

var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: ['January','February','March'],
    datasets: [{
      type: 'line',
      label: 'line',
      data: [3,1,2],
      fill: false,
      backgroundColor: 'rgba(0, 0, 0, 0)',
      borderColor: 'rgb(54, 162, 235)'
    }, {
      type: 'bar',
      label: 'bar',
      data: [1,2,3],
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgba(0, 0, 0, 0)'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'legend.labels.style: undefined'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    }
  }
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart2 = new Chart(ctx2, {
  type: 'bar',
  data: {
    labels: ['January','February','March'],
    datasets: [{
      type: 'line',
      label: 'line',
      data: [3,1,2],
      fill: false,
      borderColor: 'rgb(54, 162, 235)'
    }, {
      type: 'bar',
      label: 'bar',
      data: [1,2,3],
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgba(0, 0, 0, 0)'
    }]
  },
  options: {
    title: {
      display: true,
      text: 'legend.labels.style: \'box\''
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    },
    legend: {
      labels: {
        style: 'box'
      }
    }
  }
});
var ctx3 = document.getElementById('myChart3').getContext('2d');
var chart3 = new Chart(ctx3, {
  type: 'bar',
  data: {
    labels: ['January','February','March'],
    datasets: [{
      data: [1,2,3],
      backgroundColor: [
      	'rgb(255, 99, 132)',
        'rgb(0, 0, 0)',
        'rgb(0, 0, 0)'
      ],
      borderColor: [
        'rgb(54, 162, 235)',
        'rgb(127, 0, 0)',
        'rgb(127, 0, 0)'
      ],
      borderWidth: [3,6,9],
    }]
  },
  options: {
    title: {
      display: true,
      text: '3. Legend border width...