Set the pointDot option on combo stacked bar-line chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Set the pointDot option on combo stacked bar-line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js 2.1</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from  w w  w  .  j  a  v  a2  s  . com*/
var sales = [1000,3000, 2000, 4000, 1000,2000, 3000,4000 ,3000, 4000, 4000, 1000];
var addtlUrl = [2000, 1000,3000, 2000, 4000, 1000,2000, 3000,4000 ,3000, 4000, 4000];
var addtlSvcs = [1000,3000, 2000, 4000, 1000,2000, 3000,4000 ,3000, 4000, 4000, 5000];
var installBase = [3000, 2000, 4000, 1000,2000, 3000,4000 ,3000, 4000, 4000, 5000, 1000];
var doubleComp = [2000, 4000, 1000,2000, 3000,4000 ,3000, 4000, 4000, 5000, 1000, 1000];
var baseQuota =  [40000, 10000,20000, 30000,40000 ,30000, 40000, 40000, 50000, 10000, 10000, 30000];
var ytdData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [
      {
        type: 'bar',
        label: 'Sales',
        backgroundColor: 'green',
        data: sales,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Additional URL',
        backgroundColor: 'red',
        data: addtlUrl,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Recurring Services',
        backgroundColor: 'orange',
        data: addtlSvcs,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Install Base',
        backgroundColor: 'blue',
        data: installBase,
        borderColor: 'white'
      },
      {
        type: 'bar',
        label: 'Double Comp',
        backgroundColor: 'purple',
        data: doubleComp,
        borderColor: 'white'
      },
      {
        type: 'line',
        pointRadius: 0,
        label: 'Quota',
        fill: false,
        data: baseQuota,
        borderColor: '#C1C1C1',
        strokeColor: "rgba(151,187,205,0)",
        pointColor: "rgba(0,0,0,0)"
      },
      {
        type: 'line',
        label: 'Minimum MRR',
        pointRadius: 0,
        fill: false,
        borderDash: [5, 5],
        data: [42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000, 42000]
      }
    ]
  };
  Chart.defaults.line.pointDot = false;
  var stackedChart = new Chart($("#ytdChart").get(0).getContext("2d"), {
    type: 'bar',
    data: ytdData,
    options: {
      legend: {
        position: 'bottom'
      },
      tooltips: {
        mode: 'label'
      },
      responsive: true,
      scales: {
        xAxes: [{
          stacked: true,
          ticks: {
            beginAtZero: true
          }
        }],
        yAxes: [{
          stacked: false,
          ticks: {
            suggestedMax: 5,
            beginAtZero: true,
            callback: function(value) {
              return Number(value).toFixed(0);
            }
          }
        }]
      }
    }
  });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="ytdChart"></canvas>  
   </body>
</html>

Related Tutorials