%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: line-area.js
Description: Chartjs line area chart
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
// Line area chart
// ------------------------------
$(window).on("load", function(){
//Get the context of the Chart canvas element we want to select
var ctx = $("#area-chart");
// Chart Options
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: false,
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
};
// Chart Data
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [0, 150, 140, 105, 190, 230, 270],
backgroundColor: "rgba(209,212,219,.4)",
borderColor: "transparent",
pointBorderColor: "#D1D4DB",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}, {
label: "My Second dataset",
data: [0, 90, 120, 240, 140, 250, 190],
backgroundColor: "rgba(81,117,224,.7)",
borderColor: "transparent",
pointBorderColor: "#5175E0",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
}]
};
var config = {
type: 'line',
// Chart Options
options : chartOptions,
// Chart Data
data : chartData
};
// Create the chart
var areaChart = new Chart(ctx, config);
});
Zerion Mini Shell 1.0