<style>
		body{
			background: #e2e2e2;
		}
		.chart-container{
			max-width: 700px;
		}
		.chart-options{
			text-align: center;
			padding-left: 90px;
			padding-bottom: 20px;
			padding-top: 20px;
		}
		.chart-options .update-chart{
			color: #8a8a8a;
			text-decoration: none;
			font-family: "Asul";
			display: inline-block;
			margin: 5px 5px;
			font-size: 14px;
			position:relative;
			padding-left: 34px;
			cursor: pointer;
		}
		.chart-options .update-chart.active{
			color: #000;
		}
		.chart-description{
			padding-top: 40px;
			padding-left: 85px;
			font-family: "Asul";
			text-align: center;
		}
		.color-code{
			display: inline-block;
			width: 30px;
			height: 15px;
			position: absolute;
			left: 0;
			top: 0px;
		}
	</style>

	<div class="chart-container">
		<div class="chart-options">
			<div href="#" class="update-chart" data-target="todos"><span class="color-code" style="background: #f6303f;"></span>TODOS</div>
			<div href="#" class="update-chart active" data-target="directos-pef"><span class="color-code" style="background: #003851;"></span>CONGRESO DE LA UNIÓN</div>
			<div href="#" class="update-chart" data-target="conaculta"><span class="color-code" style="background: #c6bac8"></span>CONACULTA</div>
			<div href="#" class="update-chart" data-target="sep"><span class="color-code" style="background: #311025"></span>SEP</div><br>
			<div href="#" class="update-chart" data-target="estados-y-municipios"><span class="color-code" style="background: #893544"></span>ESTADOS Y MUNICIPIOS</div>
			<div href="#" class="update-chart" data-target="otros"><span class="color-code" style="background: #333333"></span>OTROS</div>
			<div href="#" class="update-chart" data-target="otros-beneficios"><span class="color-code" style="background: #f6303f"></span>PAGO DE SEDE Y FRANQUICIA</div>
		</div>

		<canvas id="myChart"></canvas>

		<div class="chart-description">
			TOTAL 2009-2018: MIL 689 MILLONES DE PESOS
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>


	<script>
		var todos = {
		            label: "TODOS",
		            backgroundColor: '#f6303f',
		            data: [7500000,	54000000,	401675500,	122032320,	275600000,	156258400,	187554000,	264557272,	146081109,	74230000],
		        };
		var directosPef = {
		            label: "CONGRESO DE LA UNIÓN",
		            backgroundColor: '#003851',
		            data: [0, 0, 100000000, 103000000, 103000000, 95000000, 127798000, 233850000, 92699996, 70000000],
		        };
		var conaculta = {
		            label: "CONACULTA",
		            backgroundColor: '#c6bac8',
		            data: [0, 0, 0, 0, 12000000, 41000000, 42000000, 0, 44000000],
		        };
		var sep = {
		            label: "SEP",
		            backgroundColor: '#311025',
		            data: [0, 22000000, 0, 0, 0, 0, 0, 0, 0, 0],
		        };
		var estadosyMunicipios = {
		            label: "ESTADOS Y MUNICIPIOS",
		            backgroundColor: '#893544',
		            data: [7500000, 30500000, 35490000, 19032320, 20600000, 18358400, 12300000, 25254400, 5650000, 2000000],
		        };
		var otros = {
		            label: "OTROS",
		            backgroundColor: '#333333',
		            data: [0, 1500000, 0, 0, 0, 100000, 3645000, 3452872, 1531113, 0],
		        };
		var otrosBeneficios = {
		            label: "PAGO DE SEDE Y FRANQUICIA",
		            backgroundColor: '#f6303f',
		            data: [0, 0, 266185500, 0, 140000000, 1800000, 1811000, 2000000, 2200000, 2230000],
		        };
		var ctx = document.getElementById('myChart').getContext('2d');
		var chart = new Chart(ctx, {
		  type: 'bar',
		  data: {
		    labels: ["2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"],
		    datasets: [directosPef]
		  },
		  options: {
		  	legend: {
		        display: false
		    },
		  	tooltips: {
		  	  titleFontFamily: "Roboto Mono",
		  	  bodyFontFamily: "Roboto Mono",
	          callbacks: {
	                label: function(tooltipItem, data) {
	                	console.log(tooltipItem);
	                	var category = data.datasets[tooltipItem.datasetIndex].label;
	                    var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
	                    if(parseInt(value) >= 1000){
	                               return category + ' $' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	                            } else {
	                               return category + ' $' + value;
	                            }
	                }
	          } // end callbacks:
	        },
		    scales: {
		      xAxes: [{
		      	stacked: true,
		      	gridLines: {
		      		color: "#f6303e",
                    display:false
                },
                ticks: {
                	fontFamily: "Roboto Mono",
                	fontColor: "black"
               	}
		      }],
		      yAxes: [{
		      	stacked: true,
		      	gridLines: {
		      		color: "#f6303e",
                    display:false
                },
                ticks: {
                	fontFamily: "Roboto Mono",
                	fontColor: "black",
		            beginAtZero: true,
		            stacked: true,
		            min: 0,
		            max: 450000000,
		            stepSize: 50000000,
		            callback: function(value, index, values) {
		              if(parseInt(value) >= 1000){
		                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		              } else {
		                return '$' + value;
		              }
		            }
		        }
		      }]
		    }
		  }
		});

		$('.update-chart').click(function(){
			$(this).toggleClass('active');
			chart.data.datasets = [];
			if($(this).attr("data-target")=="todos"){
				$('.update-chart').removeClass('active');
				$(this).toggleClass('active');
				console.log("hello");
				chart.data.datasets.push(todos)
			}else{
				$('.update-chart[data-target="todos"]').removeClass('active');
				$('.update-chart').each(function(){
					if($(this).hasClass('active')){
						switch($(this).attr("data-target")){
							case 'directos-pef':
								chart.data.datasets.push(directosPef);
								break;
							case 'conaculta':
								chart.data.datasets.push(conaculta);
								break;
							case 'sep':
								chart.data.datasets.push(sep);
								break;
							case 'estados-y-municipios':
								chart.data.datasets.push(estadosyMunicipios);
								break;
							case 'otros':
								chart.data.datasets.push(otros);
								break;
							case 'otros-beneficios':
								chart.data.datasets.push(otrosBeneficios);
								break;
						}
					}
				});
			}
			chart.update();
		});
	</script>