2👍
Follow the perfect link https://codepen.io/mateegojra/pen/GXVOap
var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// We are only changing the chart type, so let's make that a global variable along with the chart object:
var chartType = 'bar';
var myBarChart;
// Global Options:
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: ["2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"],
datasets: [{
label: "UFO Sightings",
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(0,255,0,0.4)",
borderColor: "green", // The main line color
borderCapStyle: 'square',
pointBorderColor: "white",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "green",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data: [10, 13, 17, 12, 30, 47, 60, 120, 230, 300, 310, 400],
spanGaps: true,
}]
};
// Notice the scaleLabel at the same level as Ticks
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
fontSize: 18,
display: true,
text: 'I want to believe !',
position: 'bottom'
}
};
// We add an init function down here after the chart options are declared.
init();
function init() {
// Chart declaration:
myBarChart = new Chart(ctx, {
type: chartType,
data: data,
options: options
});
}
function toggleChart() {
//destroy chart:
myBarChart.destroy();
//change chart type:
this.chartType = (this.chartType == 'bar') ? 'line' : 'bar';
//restart chart:
init();
}
body{
background-color: black;
}
.as-console-wrapper{display: none !important }
#barChart{
background-color:rgba(255,255,255,0.1);
border-radius: 6px;
/* Check out the fancy shadow on this one */
}
.btn{
color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!--
THe post that goes with this pen:
https://codepen.io/k3no/post/learning-by-example-getting-started-with-chart-js
-->
<div class="container">
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<!-- Chart.js Canvas Tag -->
<canvas id="barChart"></canvas>
</div>
<div class="col-md-1"></div>
</div>
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"><button type="button" class="btn btn-success btn-md" onclick="toggleChart();">Toggle Chart </button></div>
<div class="col-md-1"></div>
</div>
</div>
0👍
Put the following code in your onclick function:
myChart.type = "pie";
myChart.update();
Source:stackexchange.com