/*=========================================================================================
File Name: chart-chartjs.js
Description: Chartjs Examples
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(window).on('load', function () {
'use strict';
var chartWrapper = $('.chartjs'),
flatPicker = $('.flat-picker'),
barChartEx = $('.bar-chart-ex'),
horizontalBarChartEx = $('.horizontal-bar-chart-ex'),
lineChartEx = $('.line-chart-ex'),
radarChartEx = $('.radar-chart-ex'),
polarAreaChartEx = $('.polar-area-chart-ex'),
bubbleChartEx = $('.bubble-chart-ex'),
doughnutChartEx = $('.doughnut-chart-ex'),
scatterChartEx = $('.scatter-chart-ex'),
lineAreaChartEx = $('.line-area-chart-ex');
// Color Variables
var primaryColorShade = '#836AF9',
yellowColor = '#ffe800',
successColorShade = '#28dac6',
warningColorShade = '#ffe802',
warningLightColor = '#FDAC34',
infoColorShade = '#299AFF',
greyColor = '#4F5D70',
blueColor = '#2c9aff',
blueLightColor = '#84D0FF',
greyLightColor = '#EDF1F4',
tooltipShadow = 'rgba(0, 0, 0, 0.25)',
lineChartPrimary = '#666ee8',
lineChartDanger = '#ff4961',
labelColor = '#6e6b7b',
grid_line_color = 'rgba(200, 200, 200, 0.2)'; // RGBA color helps in dark layout
// Detect Dark Layout
if ($('html').hasClass('dark-layout')) {
labelColor = '#b4b7bd';
}
// Wrap charts with div of height according to their data-height
if (chartWrapper.length) {
chartWrapper.each(function () {
$(this).wrap($('<div style="height:' + this.getAttribute('data-height') + 'px"></div>'));
});
}
// Init flatpicker
if (flatPicker.length) {
var date = new Date();
flatPicker.each(function () {
$(this).flatpickr({
mode: 'range',
defaultDate: ['2019-05-01', '2019-05-10']
});
});
}
// Bar Chart
// --------------------------------------------------------------------
if (barChartEx.length) {
var barChartExample = new Chart(barChartEx, {
type: 'bar',
options: {
elements: {
rectangle: {
borderWidth: 2,
borderSkipped: 'bottom'
}
},
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 500,
legend: {
display: false
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: true,
color: grid_line_color,
zeroLineColor: grid_line_color
},
scaleLabel: {
display: false
},
ticks: {
fontColor: labelColor
}
}
],
yAxes: [
{
display: true,
gridLines: {
color: grid_line_color,
zeroLineColor: grid_line_color
},
ticks: {
stepSize: 100,
min: 0,
max: 400,
fontColor: labelColor
}
}
]
}
},
data: {
labels: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12', '16/12', '17/12'],
datasets: [
{
data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190],
barThickness: 15,
backgroundColor: successColorShade,
borderColor: 'transparent'
}
]
}
});
}
//Draw rectangle Bar charts with rounded border
Chart.elements.Rectangle.prototype.draw = function () {
var ctx = this._chart.ctx;
var viewVar = this._view;
var left, right, top, bottom, signX, signY, borderSkipped, radius;
var borderWidth = viewVar.borderWidth;
var cornerRadius = 20;
if (!viewVar.horizontal) {
left = viewVar.x - viewVar.width / 2;
right = viewVar.x + viewVar.width / 2;
top = viewVar.y;
bottom = viewVar.base;
signX = 1;
signY = top > bottom ? 1 : -1;
borderSkipped = viewVar.borderSkipped || 'bottom';
} else {
left = viewVar.base;
right = viewVar.x;
top = viewVar.y - viewVar.height / 2;
bottom = viewVar.y + viewVar.height / 2;
signX = right > left ? 1 : -1;
signY = 1;
borderSkipped = viewVar.borderSkipped || 'left';
}
if (borderWidth) {
var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
borderWidth = borderWidth > barSize ? barSize : borderWidth;
var halfStroke = borderWidth / 2;
var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
if (borderTop !== borderBottom) {
left = borderLeft;
right = borderRight;
}
}
ctx.beginPath();
ctx.fillStyle = viewVar.backgroundColor;
ctx.strokeStyle = viewVar.borderColor;
ctx.lineWidth = borderWidth;
var corners = [
[left, bottom],
[left, top],
[right, top],
[right, bottom]
];
var borders = ['bottom', 'left', 'top', 'right'];
var startCorner = borders.indexOf(borderSkipped, 0);
if (startCorner === -1) {
startCorner = 0;
}
function cornerAt(index) {
return corners[(startCorner + index) % 4];
}
var corner = cornerAt(0);
ctx.moveTo(corner[0], corner[1]);
for (var i = 1; i < 4; i++) {
corner = cornerAt(i);
var nextCornerId = i + 1;
if (nextCornerId == 4) {
nextCornerId = 0;
}
var nextCorner = cornerAt(nextCornerId);
var width = corners[2][0] - corners[1][0],
height = corners[0][1] - corners[1][1],
x = corners[1][0],
y = corners[1][1];
var radius = cornerRadius;
if (radius > height / 2) {
radius = height / 2;
}
if (radius > width / 2) {
radius = width / 2;
}
if (!viewVar.horizontal) {
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
} else {
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x, y);
}
}
ctx.fill();
if (borderWidth) {
ctx.stroke();
}
};
// Horizontal Bar Chart
// --------------------------------------------------------------------
if (horizontalBarChartEx.length) {
new Chart(horizontalBarChartEx, {
type: 'horizontalBar',
options: {
elements: {
rectangle: {
borderWidth: 2,
borderSkipped: 'right'
}
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
},
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 500,
legend: {
display: false
},
layout: {
padding: {
bottom: -30,
left: -25
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
zeroLineColor: grid_line_color,
borderColor: 'transparent',
color: grid_line_color
},
scaleLabel: {
display: true
},
ticks: {
min: 0,
fontColor: labelColor
}
}
],
yAxes: [
{
display: true,
gridLines: {
display: false
},
scaleLabel: {
display: true
},
ticks: {
fontColor: labelColor
}
}
]
}
},
data: {
labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
datasets: [
{
data: [710, 350, 470, 580, 230, 460, 120],
barThickness: 15,
backgroundColor: window.colors.solid.info,
borderColor: 'transparent'
}
]
}
});
}
// Line Chart
// --------------------------------------------------------------------
if (lineChartEx.length) {
var lineExample = new Chart(lineChartEx, {
type: 'line',
plugins: [
// to add spacing between legends and chart
{
beforeInit: function (chart) {
chart.legend.afterFit = function () {
this.height += 20;
};
}
}
],
options: {
responsive: true,
maintainAspectRatio: false,
backgroundColor: false,
hover: {
mode: 'label'
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
},
layout: {
padding: {
top: -15,
bottom: -25,
left: -15
}
},
scales: {
xAxes: [
{
display: true,
scaleLabel: {
display: true
},
gridLines: {
display: true,
color: grid_line_color,
zeroLineColor: grid_line_color
},
ticks: {
fontColor: labelColor
}
}
],
yAxes: [
{
display: true,
scaleLabel: {
display: true
},
ticks: {
stepSize: 100,
min: 0,
max: 400,
fontColor: labelColor
},
gridLines: {
display: true,
color: grid_line_color,
zeroLineColor: grid_line_color
}
}
]
},
legend: {
position: 'top',
align: 'start',
labels: {
usePointStyle: true,
padding: 25,
boxWidth: 9
}
}
},
data: {
labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
datasets: [
{
data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
label: 'Europe',
borderColor: lineChartDanger,
lineTension: 0.5,
pointStyle: 'circle',
backgroundColor: lineChartDanger,
fill: false,
pointRadius: 1,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBorderColor: window.colors.solid.white,
pointHoverBackgroundColor: lineChartDanger,
pointShadowOffsetX: 1,
pointShadowOffsetY: 1,
pointShadowBlur: 5,
pointShadowColor: tooltipShadow
},
{
data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
label: 'Asia',
borderColor: lineChartPrimary,
lineTension: 0.5,
pointStyle: 'circle',
backgroundColor: lineChartPrimary,
fill: false,
pointRadius: 1,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBorderColor: window.colors.solid.white,
pointHoverBackgroundColor: lineChartPrimary,
pointShadowOffsetX: 1,
pointShadowOffsetY: 1,
pointShadowBlur: 5,
pointShadowColor: tooltipShadow
},
{
data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
label: 'Africa',
borderColor: warningColorShade,
lineTension: 0.5,
pointStyle: 'circle',
backgroundColor: warningColorShade,
fill: false,
pointRadius: 1,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBorderColor: window.colors.solid.white,
pointHoverBackgroundColor: warningColorShade,
pointShadowOffsetX: 1,
pointShadowOffsetY: 1,
pointShadowBlur: 5,
pointShadowColor: tooltipShadow
}
]
}
});
}
// Radar Chart
// --------------------------------------------------------------------
if (radarChartEx.length) {
var canvas = document.getElementById('canvas');
// For radar gradient color
var gradientBlue = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientBlue.addColorStop(0, 'rgba(155,136,250, 0.9)');
gradientBlue.addColorStop(1, 'rgba(155,136,250, 0.8)');
var gradientRed = canvas.getContext('2d').createLinearGradient(0, 0, 0, 150);
gradientRed.addColorStop(0, 'rgba(255,161,161, 0.9)');
gradientRed.addColorStop(1, 'rgba(255,161,161, 0.8)');
var radarExample = new Chart(radarChartEx, {
type: 'radar',
plugins: [
// to add spacing between legends and chart
{
beforeInit: function (chart) {
chart.legend.afterFit = function () {
this.height += 20;
};
}
}
],
data: {
labels: ['STA', 'STR', 'AGI', 'VIT', 'CHA', 'INT'],
datasets: [
{
label: 'Donté Panlin',
data: [25, 59, 90, 81, 60, 82],
fill: true,
backgroundColor: gradientRed,
borderColor: 'transparent',
pointBackgroundColor: 'transparent',
pointBorderColor: 'transparent'
},
{
label: 'Mireska Sunbreeze',
data: [40, 100, 40, 90, 40, 90],
fill: true,
backgroundColor: gradientBlue,
borderColor: 'transparent',
pointBackgroundColor: 'transparent',
pointBorderColor: 'transparent'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 500,
legend: {
position: 'top',
labels: {
padding: 25,
fontColor: labelColor
}
},
layout: {
padding: {
top: -20
}
},
tooltips: {
enabled: false,
custom: function (tooltip) {
var tooltipEl = document.getElementById('tooltip');
if (tooltip.body) {
tooltipEl.style.display = 'block';
if (tooltip.body[0].lines && tooltip.body[0].lines[0]) {
tooltipEl.innerHTML = tooltip.body[0].lines[0];
}
} else {
setTimeout(function () {
tooltipEl.style.display = 'none';
}, 500);
}
}
},
gridLines: {
display: false
},
scale: {
ticks: {
maxTicksLimit: 1,
display: false,
fontColor: labelColor
},
gridLines: {
color: grid_line_color
},
angleLines: { color: grid_line_color }
}
}
});
}
// Polar Area Chart
// --------------------------------------------------------------------
if (polarAreaChartEx.length) {
var polarExample = new Chart(polarAreaChartEx, {
type: 'polarArea',
options: {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 500,
legend: {
position: 'right',
labels: {
usePointStyle: true,
padding: 25,
boxWidth: 9,
fontColor: labelColor
}
},
layout: {
padding: {
top: -5,
bottom: -45
}
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
},
scale: {
scaleShowLine: true,
scaleLineWidth: 1,
ticks: {
display: false,
fontColor: labelColor
},
reverse: false,
gridLines: {
display: false
}
},
animation: {
animateRotate: false
}
},
data: {
labels: ['Africa', 'Asia', 'Europe', 'America', 'Antarctica', 'Australia'],
datasets: [
{
label: 'Population (millions)',
backgroundColor: [
primaryColorShade,
warningColorShade,
window.colors.solid.primary,
infoColorShade,
greyColor,
successColorShade
],
data: [19, 17.5, 15, 13.5, 11, 9],
borderWidth: 0
}
]
}
});
}
// Bubble Chart
// --------------------------------------------------------------------
if (bubbleChartEx.length) {
var bubbleExample = new Chart(bubbleChartEx, {
type: 'bubble',
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
display: true,
gridLines: {
color: grid_line_color,
zeroLineColor: grid_line_color
},
ticks: {
stepSize: 10,
min: 0,
max: 140,
fontColor: labelColor
}
}
],
yAxes: [
{
display: true,
gridLines: {
color: grid_line_color,
zeroLineColor: grid_line_color
},
ticks: {
stepSize: 100,
min: 0,
max: 400,
fontColor: labelColor
}
}
]
},
legend: {
display: false
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
}
},
data: {
animation: {
duration: 10000
},
datasets: [
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 20,
y: 74,
r: 10
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 30,
y: 72,
r: 5
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 10,
y: 110,
r: 5
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 40,
y: 110,
r: 7
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 20,
y: 135,
r: 6
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 10,
y: 160,
r: 12
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 30,
y: 165,
r: 7
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 40,
y: 200,
r: 20
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 90,
y: 185,
r: 7
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 50,
y: 240,
r: 7
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 60,
y: 275,
r: 10
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 70,
y: 305,
r: 5
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 80,
y: 325,
r: 4
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 50,
y: 285,
r: 5
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 60,
y: 235,
r: 5
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 70,
y: 275,
r: 7
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 80,
y: 290,
r: 4
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 90,
y: 250,
r: 10
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 100,
y: 220,
r: 7
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 120,
y: 230,
r: 4
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 110,
y: 320,
r: 15
}
]
},
{
backgroundColor: warningColorShade,
borderColor: warningColorShade,
data: [
{
x: 130,
y: 330,
r: 7
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 100,
y: 310,
r: 5
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 110,
y: 240,
r: 5
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 120,
y: 270,
r: 7
}
]
},
{
backgroundColor: primaryColorShade,
borderColor: primaryColorShade,
data: [
{
x: 130,
y: 300,
r: 6
}
]
}
]
}
});
}
// Doughnut Chart
// --------------------------------------------------------------------
if (doughnutChartEx.length) {
var doughnutExample = new Chart(doughnutChartEx, {
type: 'doughnut',
options: {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 500,
cutoutPercentage: 60,
legend: { display: false },
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var label = data.datasets[0].labels[tooltipItem.index] || '',
value = data.datasets[0].data[tooltipItem.index];
var output = ' ' + label + ' : ' + value + ' %';
return output;
}
},
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
}
},
data: {
datasets: [
{
labels: ['Tablet', 'Mobile', 'Desktop'],
data: [10, 10, 80],
backgroundColor: [successColorShade, warningLightColor, window.colors.solid.primary],
borderWidth: 0,
pointStyle: 'rectRounded'
}
]
}
});
}
// Scatter Chart
// --------------------------------------------------------------------
if (scatterChartEx.length) {
var scatterExample = new Chart(scatterChartEx, {
type: 'scatter',
plugins: [
// to add spacing between legends and chart
{
beforeInit: function (chart) {
chart.legend.afterFit = function () {
this.height += 20;
};
}
}
],
options: {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration: 800,
title: {
display: false,
text: 'Chart.js Scatter Chart'
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
},
scales: {
xAxes: [
{
gridLines: {
color: grid_line_color,
zeroLineColor: grid_line_color
},
ticks: {
stepSize: 10,
min: 0,
max: 140,
fontColor: labelColor
}
}
],
yAxes: [
{
gridLines: {
color: grid_line_color,
zeroLineColor: grid_line_color
},
ticks: {
stepSize: 100,
min: 0,
max: 400,
fontColor: labelColor
}
}
]
},
legend: {
position: 'top',
align: 'start',
labels: {
usePointStyle: true,
padding: 25,
boxWidth: 9
}
},
layout: {
padding: {
top: -20
}
}
},
data: {
datasets: [
{
label: 'iPhone',
data: [
{
x: 72,
y: 225
},
{
x: 81,
y: 270
},
{
x: 90,
y: 230
},
{
x: 103,
y: 305
},
{
x: 103,
y: 245
},
{
x: 108,
y: 275
},
{
x: 110,
y: 290
},
{
x: 111,
y: 315
},
{
x: 109,
y: 350
},
{
x: 116,
y: 340
},
{
x: 113,
y: 260
},
{
x: 117,
y: 275
},
{
x: 117,
y: 295
},
{
x: 126,
y: 280
},
{
x: 127,
y: 340
},
{
x: 133,
y: 330
}
],
backgroundColor: window.colors.solid.primary,
borderColor: 'transparent',
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 5
},
{
label: 'Samsung Note',
data: [
{
x: 13,
y: 95
},
{
x: 22,
y: 105
},
{
x: 17,
y: 115
},
{
x: 19,
y: 130
},
{
x: 21,
y: 125
},
{
x: 35,
y: 125
},
{
x: 13,
y: 155
},
{
x: 21,
y: 165
},
{
x: 25,
y: 155
},
{
x: 18,
y: 190
},
{
x: 26,
y: 180
},
{
x: 43,
y: 180
},
{
x: 53,
y: 202
},
{
x: 61,
y: 165
},
{
x: 67,
y: 225
}
],
backgroundColor: yellowColor,
borderColor: 'transparent',
pointRadius: 5
},
{
label: 'OnePlus',
data: [
{
x: 70,
y: 195
},
{
x: 72,
y: 270
},
{
x: 98,
y: 255
},
{
x: 100,
y: 215
},
{
x: 87,
y: 240
},
{
x: 94,
y: 280
},
{
x: 99,
y: 300
},
{
x: 102,
y: 290
},
{
x: 110,
y: 275
},
{
x: 111,
y: 250
},
{
x: 94,
y: 280
},
{
x: 92,
y: 340
},
{
x: 100,
y: 335
},
{
x: 108,
y: 330
}
],
backgroundColor: successColorShade,
borderColor: 'transparent',
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 5
}
]
}
});
}
// Line AreaChart
// --------------------------------------------------------------------
if (lineAreaChartEx.length) {
new Chart(lineAreaChartEx, {
type: 'line',
plugins: [
// to add spacing between legends and chart
{
beforeInit: function (chart) {
chart.legend.afterFit = function () {
this.height += 20;
};
}
}
],
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'top',
align: 'start',
labels: {
usePointStyle: true,
padding: 25,
boxWidth: 9
}
},
layout: {
padding: {
top: -20,
bottom: -20,
left: -20
}
},
tooltips: {
// Updated default tooltip UI
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 8,
shadowColor: tooltipShadow,
backgroundColor: window.colors.solid.white,
titleFontColor: window.colors.solid.black,
bodyFontColor: window.colors.solid.black
},
scales: {
xAxes: [
{
display: true,
gridLines: {
color: 'transparent',
zeroLineColor: grid_line_color
},
scaleLabel: {
display: true
},
ticks: {
fontColor: labelColor
}
}
],
yAxes: [
{
display: true,
gridLines: {
color: 'transparent',
zeroLineColor: grid_line_color
},
ticks: {
stepSize: 100,
min: 0,
max: 400,
fontColor: labelColor
},
scaleLabel: {
display: true
}
}
]
}
},
data: {
labels: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12',
'20/12',
''
],
datasets: [
{
label: 'Africa',
data: [40, 55, 45, 75, 65, 55, 70, 60, 100, 98, 90, 120, 125, 140, 155],
lineTension: 0,
backgroundColor: blueColor,
pointStyle: 'circle',
borderColor: 'transparent',
pointRadius: 0.5,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: blueColor,
pointHoverBorderColor: window.colors.solid.white
},
{
label: 'Asia',
data: [70, 85, 75, 150, 100, 140, 110, 105, 160, 150, 125, 190, 200, 240, 275],
lineTension: 0,
backgroundColor: blueLightColor,
pointStyle: 'circle',
borderColor: 'transparent',
pointRadius: 0.5,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: blueLightColor,
pointHoverBorderColor: window.colors.solid.white
},
{
label: 'Europe',
data: [240, 195, 160, 215, 185, 215, 185, 200, 250, 210, 195, 250, 235, 300, 315],
lineTension: 0,
backgroundColor: greyLightColor,
pointStyle: 'circle',
borderColor: 'transparent',
pointRadius: 0.5,
pointHoverRadius: 5,
pointHoverBorderWidth: 5,
pointBorderColor: 'transparent',
pointHoverBackgroundColor: greyLightColor,
pointHoverBorderColor: window.colors.solid.white
}
]
}
});
}
});