const linewithDataChart = {
chartOptions: {
chart: {
zoom: {
enabled: false
},
toolbar: {
show: false
}
},
colors: ['#556ee6', '#34c38f'],
dataLabels: {
enabled: true,
},
stroke: {
width: [3, 3],
curve: 'straight'
},
title: {
text: 'Average High & Low Temperature',
align: 'left'
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.2
},
borderColor: '#f1f1f1'
},
markers: {
style: 'inverted',
size: 6
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
title: {
text: 'Month'
}
},
yaxis: {
title: {
text: 'Temperature'
},
min: 5,
max: 40
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
},
responsive: [{
breakpoint: 600,
options: {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
}
}],
},
series: [{
name: "High - 2018",
data: [26, 24, 32, 36, 33, 31, 33]
},
{
name: "Low - 2018",
data: [14, 11, 16, 12, 17, 13, 12]
}
],
};
const dashedLineChart = {
series: [{
name: "Session Duration",
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
},
{
name: "Page Views",
data: [36, 42, 60, 42, 13, 18, 29, 37, 36, 51, 32, 35]
},
{
name: 'Total Visits',
data: [89, 56, 74, 98, 72, 38, 64, 46, 84, 58, 46, 49]
}],
chartOptions: {
chart: {
zoom: {
enabled: false
},
toolbar: {
show: false,
}
},
colors: ['#556ee6', '#f46a6a', '#34c38f'],
dataLabels: {
enabled: false
},
stroke: {
width: [3, 4, 3],
curve: 'straight',
dashArray: [0, 8, 5]
},
title: {
text: 'Page Statistics',
align: 'left'
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
'10 Jan', '11 Jan', '12 Jan'
],
},
tooltip: {
y: [{
title: {
formatter: function (val) {
return val + " (mins)"
}
}
}, {
title: {
formatter: function (val) {
return val + " per session"
}
}
}, {
title: {
formatter: function (val) {
return val;
}
}
}]
},
grid: {
borderColor: '#f1f1f1',
}
}
};
const splineAreaChart = {
series: [{
name: 'series1',
data: [34, 40, 28, 52, 42, 109, 100]
}, {
name: 'series2',
data: [32, 60, 34, 46, 34, 52, 41]
}],
chartOptions: {
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 3,
},
colors: ['#556ee6', '#34c38f'],
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
},
grid: {
borderColor: '#f1f1f1',
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
}
}
};
const columnChart = {
series: [{
name: 'Net Profit',
data: [46, 57, 59, 54, 62, 58, 64, 60, 66]
}, {
name: 'Revenue',
data: [74, 83, 102, 97, 86, 106, 93, 114, 94]
}, {
name: 'Free Cash Flow',
data: [37, 42, 38, 26, 47, 50, 54, 55, 43]
}],
chartOptions: {
chart: {
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '45%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
colors: ['#5664d2', '#1cbb8c', '#fcb92c'],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
grid: {
borderColor: '#f1f1f1',
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
}
};
const columnDatalabelChart = {
series: [{
name: 'Inflation',
data: [2.5, 3.2, 5.0, 10.1, 4.2, 3.8, 3, 2.4, 4.0, 1.2, 3.5, 0.8]
}],
chartOptions: {
chart: {
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
colors: ['#556ee6'],
grid: {
borderColor: '#f1f1f1',
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
labels: {
offsetY: -18,
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
offsetY: -35,
}
},
fill: {
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [50, 0, 100, 100]
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly Inflation in Argentina, 2002',
floating: true,
offsetY: 320,
align: 'center',
style: {
color: '#444'
}
},
}
};
const barChart = {
series: [{
data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
}],
chartOptions: {
chart: {
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: false
},
colors: ['#34c38f'],
grid: {
borderColor: '#f1f1f1',
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
}
}
};
const mixedChart = {
series: [{
name: 'Team A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Team B',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: 'Team C',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
chartOptions: {
chart: {
stacked: false,
toolbar: {
show: false
}
},
stroke: {
width: [0, 2, 4],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
colors: ['#1cbb8c', '#fcb92c', '#5664d2'],
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003', '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'],
markers: {
size: 0
},
legend: {
offsetY: -10,
},
xaxis: {
type: 'datetime'
},
yaxis: {
title: {
text: 'Points',
},
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
},
grid: {
borderColor: '#f1f1f1'
}
}
};
const radialChart = {
series: [44, 55, 67, 83],
chartOptions: {
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: '22px',
},
value: {
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
// eslint-disable-next-line no-unused-vars
formatter: function (w) {
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
return 249
}
}
}
}
},
labels: ['Computer', 'Tablet', 'Laptop', 'Mobile'],
colors: ['#5664d2', '#fcb92c', '#1cbb8c', '#ff3d60'],
}
};
const pieChart = {
series: [44, 55, 41, 17, 15],
chartOptions: {
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
colors: ["#1cbb8c", "#5664d2", "#fcb92c", "#4aa3ff", "#ff3d60"],
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'center',
verticalAlign: 'middle',
floating: false,
fontSize: '14px',
offsetX: 0,
offsetY: -10
},
responsive: [{
breakpoint: 600,
options: {
chart: {
height: 240
},
legend: {
show: false
},
}
}]
}
};
const donutChart = {
series: [44, 55, 41, 17, 15],
chartOptions: {
labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5"],
colors: ["#1cbb8c", "#5664d2", "#fcb92c", "#4aa3ff", "#ff3d60"],
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'center',
verticalAlign: 'middle',
floating: false,
fontSize: '14px',
offsetX: 0,
offsetY: -10
},
responsive: [{
breakpoint: 600,
options: {
chart: {
height: 240
},
legend: {
show: false
},
}
}]
}
};
export { linewithDataChart, dashedLineChart, splineAreaChart, columnChart, columnDatalabelChart, barChart, mixedChart, radialChart, pieChart, donutChart };
