JSFiddle - React, Tailwind, and code Playground

stacked bar chart

by Dug Sohn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div style="padding:50px 200px">

<canvas id="bar-chart" width="400" height="250"></canvas>
</div>

SCSS

@import url(//fonts.googleapis.com/css?family=Oswald:400);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');

body {
	font-family: Open Sans,Segoe UI,Tahoma,sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	background-color: #fff;
	color: #555555;
}


$account-base:  rgb(6, 81, 128) !default;
$plans-base:    rgb(254, 162, 32) !default;
$payment-base:  rgb(46, 177, 52)      !default;
$control-base:  rgb(27, 141, 205)     !default;
$dark-base:     rgb(10, 10, 10)       !default;
$alpha: 0.1;
$alpha5: 0.5;


a, a:link, a:visited, a:active {
  text-decoration: none;
}

.btn {
  border-radius: 0;
  text-transform: uppercase;
}

.btn:disabled {
  cursor: pointer !important;
}


.no-padding {
  padding: 0;
}

.fa-wh {
  color: #fff;
}

.btn-blank {
  background: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
  outline: none !important;
}

[hidden] {
  display: none !important;
}

.btn-blank:active {
  box-shadow: none !important;
  outline: none !important;
}

hr.breaker {
  border-top: 2px solid black;
}

.fa-green {
  color: $payment-base;
}

.ui-graph-type {
	color: $payment-base;
	text-align:center;
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;
	margin-top: 0;
}

.ui-graph-controller {
	height: 300px;
	width: 55px;

		.btn-sm {
			font-family: Oswald, sans-serif;
			text-transform: uppercase;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			padding-left: 5px;

		&.btn-default {
			border: 0px solid rgba($dark-base, $alpha5);
			color: #ffffff;
			background: #e0e0e0; /* Old browsers */
			background: -moz-linear-gradient(top, #e0e0e0 0%, #b2b2b2 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #e0e0e0 0%, #b2b2b2 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #e0e0e0 0%, #b2b2b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter:...

JavaScript

// Return with commas in between
  var numberWithCommas = function(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

var dataPack1 = [40, 47, 44, 38, 27];
var dataPack2 = [10, 12, 15, 5, 8];
var dates = ["Jan", "Feb", "Apr", "May", "June"];

var bar_ctx = document.getElementById('bar-chart');

var bar_chart = new Chart(bar_ctx, {
    type: 'bar',
    data: {
        labels: dates,
        datasets: [
        {
            label: 'Your Price',
            data: dataPack1,
						backgroundColor: "rgba(46, 177, 52,.5)",
				    borderColor: "rgba(10, 10, 10, 0.3)",
            borderWidth: 1,
						hoverBackgroundColor: "rgba(46, 177, 52,.1)",
						hoverBorderWidth: 2,
						hoverBorderColor: "rgba(46, 177, 52,.2)",

        },
        {
            label: '*Average Price',
            data: dataPack2,
					     backgroundColor: "rgba(10, 10, 10, 0.1)",
            borderColor: "rgba(10, 10, 10, 0.3)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(46, 177, 52,0.9)",
            hoverBorderColor: "rgba(46, 177, 52,.2)",
        },
        ]
    },
    options: {
     		animation: {
        	duration: 10,
        },
                tooltips: {
            // Disable the on-canvas tooltip
            enabled: false,

            custom: function(tooltipModel) {
                // Tooltip Element
                var tooltipEl = document.getElementById('chartjs-tooltip');

                // Create element on first render
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = "<table></table>";
                    document.body.appendChild(tooltipEl);
                }

                // Hide if no tooltip
                if (tooltipModel.opacity === 0) {
                    tooltipEl.style.opacity = 0;
                    return;
                }

                // Set caret Position
 ...