big charts – Chart js dashboard template – 5 Best picks for JavaScript chart

big charts Examples, here you can Download free with dashboard bootstrap templates with amazing Best looking graphs & charts. big charts admin is super flexible bar chart, powerful line chart, clean & modern polarArea, bubble and doughnut responsive dashboard template using Chart js.

big charts – 6 Chart.js example charts to get you started

big charts – PROJECT FILE STRUCTURE

  • Added Include External Js Libs – index.html
  • Added Body Part – index.html
  • Added jQuery/ JavaScript Code in Footer – – index.html
  • Add CSS Code- index.html

Step 1: Added Include External Js Libs

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>big charts - Admin panel dashboard card design usign html and css - www.pakainfo.com</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

Step 2: Added Body Part

index.html

<body>
<div class="container-fluid">
  <h2>big charts Example</h2>
  <p>The Investor and Traders web site</p>
  <p>BigCharts is the world's leading and most advanced investment charting and research site.</p>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
	  <div class="chart-container">
	    <canvas id="chart1"></canvas>
	  </div>
	</div>
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart2"></canvas>
		  </div>
		</div>
    </div>
  </div>
<hr/>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart3"></canvas>
		  </div>
		</div>
    </div>
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart4"></canvas>
		  </div>
		</div>
    </div>
  </div>
</div>

<hr/>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart5"></canvas>
		  </div>
		</div>
    </div>
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart6"></canvas>
		  </div>
		</div>
    </div>
  </div>
</div>
</body>

Step 3: Added Script Code in Footer

index.html

<script type="text/javascript">
	window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var config = {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "Unfilled",
            fill: false,
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
        }, {
            label: "Dashed",
            fill: false,
            backgroundColor: window.chartColors.green,
            borderColor: window.chartColors.green,
            borderDash: [5, 5],
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
        }, {
            label: "Filled",
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
            fill: true,
        }]
    },
    options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
            position: 'top'
        },
        title: {
            position: 'top',
            display: true,
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        }
    }
};

//Draw chart
window.onload = function() {

	//chart 1
    var chart1 = document.getElementById("chart1").getContext("2d");
    config.type = 'bar';
    config.options.title.text = 'Resizable Bar Chart';
    window.myLine = new Chart(chart1, config);

    //chart 2
    var chart2 = document.getElementById("chart2").getContext("2d");
    config.type = 'line';
    config.options.title.text = 'Resizable Line Chart';
    window.myLine = new Chart(chart2, config);

    //chart 3
    var chart3 = document.getElementById("chart3").getContext("2d");
    config.type = 'bubble';
    config.options.title.text = 'Resizable bubble Chart';
    window.myLine = new Chart(chart3, config);

     //chart 4
    var chart4 = document.getElementById("chart4").getContext("2d");
    config.type = 'doughnut';
    config.options.title.text = 'Resizable doughnut Chart';
    window.myLine = new Chart(chart4, config);

    //chart 5
    var chart5 = document.getElementById("chart5").getContext("2d");
    config.type = 'polarArea';
    config.options.title.text = 'Resizable polarArea Chart';
    window.myLine = new Chart(chart5, config);

     //chart 6
    var chart6 = document.getElementById("chart6").getContext("2d");
    config.type = 'radar';
    config.options.title.text = 'Resizable radar Chart';
    window.myLine = new Chart(chart6, config);    
};

//Update type of chart 
$('#updateChart').click(function(e) {
    var chart = window.myLine;
    var types = ['line', 'bar', 'bubble', 'doughnut','polarArea','radar'];
  
    chart.config.type = types[Math.floor(Math.random()*3)];
    chart.destroy();

    var ctx = document.getElementById("chart").getContext("2d");
    window.myLine = new Chart(ctx, chart.config);
});

//Use JQUeryUI to resize the div with IE 11
$(".isResizable").resizable();


</script>

Step 4: Add CSS Code

index.html

<style type="text/css">
body {  
  padding: 16px;
  background-color: #e8e8e8;
}

/* See http://www.chartjs.org/docs/latest/general/responsive.html */
.chart-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.isResizable {
  background-color: #ffffff;
  margin: 0px auto;
  padding: 5px;
  border: 1px solid #d8d8d8;
  overflow: hidden;
  /* Not usable in IE */
  /* resize: both; */
  
  width: 800px;
  height: 400px;
  min-width: 280px;
  min-height: 280px;
  max-width: 1200px;
  max-height: 600px;
}

#updateChart {
    background: white;
    border: 1px solid #d8d8d8;
    width: 160px;
    padding: 10px;
}
</style>

Chart js Line chart size

Chart js Line chart size
Chart js Line chart size

Chart js Bubble chart size

Chart js Bubble chart size
Chart js Bubble chart size

Chart js Doughnut chart size

Chart js Doughnut chart size
Chart js Doughnut chart size

Chart js polararea chart size

Chart js polararea chart size
Chart js polararea chart size

Chart js radar chart size

Chart js radar chart size
Chart js radar chart size

Don’t Miss : How to make a bar chart in Excel with multiple data?

I hope you get an idea about BigCharts: Stock Charts, Screeners, Interactive Charting.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.