Chart.js #5869 test01

by Akihiko Kusanagi

HTML

<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<canvas id="myChart" width=512 height=256></canvas>

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');

var patternCanvas = document.createElement('canvas');
var patternContext = patternCanvas.getContext('2d');
patternCanvas.width = 6;
patternCanvas.height = 6;
patternContext.fillStyle = '#ff0000';
patternContext.fillRect(0, 0, 6, 6);
patternContext.fillStyle = '#ffff00';
patternContext.fillRect(0, 0, 4, 4);
var pattern = patternContext.createPattern(patternCanvas, 'repeat');

var gradient = ctx.createLinearGradient(0, 0, 512, 256);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#0000ff');

var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Dataset 1',
      data: [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
      borderColor: '#ff0000',
      backgroundColor: '#00ff00',
      hoverBackgroundColor: [
        '#ff0000',
        '#0000ff',
        '#ff00ff'
      ]
    }, {
      label: 'Dataset 2',
      data: [4, 4, 4, 4, 4, 5, 3, 4, 4, 4, 4],
      borderColor: pattern,
      backgroundColor: pattern
    }, {
      label: 'Dataset 3',
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      borderColor: gradient,
      backgroundColor: gradient
    }],
    labels: ['Point 1', 'Point 2', 'Point 3', 'Point 4', 'Point 5', 'Point 6', 'Point 7', 'Point 8', 'Point 9', 'Point 10', 'Point 11']
  },
  options: {
    elements: {
      line: {
        fill: false
      }
    },
    tooltips: {
      mode: 'nearest',
      intersect: false
    }
  }
});