| Line Charts |
Javascript
basicLineChart: any;
this._basicLineChart('["--vz-primary"]');
Component (Component js)
private _basicLineChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.basicLineChart = {
series: [{
name: "STOCK ABC",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 380,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false
}
},
colors: ["#3980c0", "#fa6374"],
dataLabels: {
enabled: false,
},
stroke: {
width: [3, 3],
curve: 'straight'
},
series: [{
name: "High - 2018",
data: [26, 24, 32, 36, 33, 31, 33]
},
{
name: "Low - 2018",
data: [14, 11, 16, 12, 17, 13, 12]
}
],
title: {
text: 'Average High & Low Temperature',
align: 'left',
style: {
fontWeight: 500,
},
},
grid: {
row: {
colors: ['transparent', 'transparent'],
opacity: 0.2
},
borderColor: '#f1f1f1'
},
markers: {
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
}
}
};
Html
<apx-chart [series]="lineWithDataLabelsChart.series" [chart]="lineWithDataLabelsChart.chart"
[xaxis]="lineWithDataLabelsChart.xaxis" [stroke]="lineWithDataLabelsChart.stroke"
[colors]="lineWithDataLabelsChart.colors" [dataLabels]="lineWithDataLabelsChart.dataLabels"
[legend]="lineWithDataLabelsChart.legend" [markers]="lineWithDataLabelsChart.markers"
[grid]="lineWithDataLabelsChart.grid" [yaxis]="lineWithDataLabelsChart.yaxis"
[title]="lineWithDataLabelsChart.title"></apx-chart>
|
| Area Charts |
Javascript
basicAreaChart: any;
this._basicAreaChart('["--vz-success"]');
Component (Component js)
private _basicAreaChart(colors:any) {
colors = this.getChartColorsArray(colors);
const basicAreaChart: ChartOptions = {
series: [
{
name: "STOCK ABC",
data: series.monthDataSeries1.prices
}
],
chart: {
type: "area",
height: 350,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: "straight"
},
title: {
text: "Fundamental Analysis of Stocks",
align: "left"
},
subtitle: {
text: "Price Movements",
align: "left"
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: "datetime"
},
yaxis: {
opposite: true
},
legend: {
horizontalAlign: "left"
}
}
};
HTML
<apx-chart [series]="basicAreaChart.series" [chart]="basicAreaChart.chart"
[xaxis]="basicAreaChart.xaxis" [stroke]="basicAreaChart.stroke"
[dataLabels]="basicAreaChart.dataLabels" [yaxis]="basicAreaChart.yaxis"
[labels]="basicAreaChart.labels" [legend]="basicAreaChart.legend" [title]="basicAreaChart.title"
[subtitle]="basicAreaChart.subtitle"></apx-chart>
|
| Column Charts |
Javascript
basicChart: any;
this._basicChart('["--vz-danger", "--vz-primary", "--vz-success"]');
Component (Component js)
private _basicChart(colors:any) {
colors = this.getChartColorsArray(colors);
const basicColumnChart: ChartOptions = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '45%',
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
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]
}],
colors: ["#fa6374", "#3980c0","#33a186"],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
}
};
HTML
<apx-chart [series]="basicColumnChart.series" [chart]="basicColumnChart.chart" [colors]="basicColumnChart.colors" [dataLabels]="basicColumnChart.dataLabels"
[plotOptions]="basicColumnChart.plotOptions" [yaxis]="basicColumnChart.yaxis" [legend]="basicColumnChart.legend"
[fill]="basicColumnChart.fill" [stroke]="basicColumnChart.stroke" [tooltip]="basicColumnChart.tooltip"
[xaxis]="basicColumnChart.xaxis"></apx-chart>
|
| Bar Charts |
Javascript
basicBarChart: any;
this._basicBarChart('["--vz-success"]');
Component (Component js)
private _basicBarChart(colors:any) {
colors = this.getChartColorsArray(colors);
const basicBarChart: ChartOptions = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: false
},
series: [{
data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
}],
colors: ['#33a186'],
grid: {
borderColor: '#f1f1f1',
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
}
}
};
HTML
<apx-chart [series]="basicBarChart.series" [colors]="basicBarChart.colors" [chart]="basicBarChart.chart"
[dataLabels]="basicBarChart.dataLabels" [plotOptions]="basicBarChart.plotOptions"
[xaxis]="basicBarChart.xaxis"></apx-chart>
|
| Mixed Charts |
Javascript
lineChart: any;
this._lineChart('["--vz-primary", "--vz-success"]');
Component (Component js)
private _lineChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.lineChart = {
series: [{
name: 'Website Blog',
type: 'column',
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
}, {
name: 'Social Media',
type: 'line',
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
}],
chart: {
height: 350,
type: 'line',
toolbar: {
show: false,
}
},
stroke: {
width: [0, 4]
},
title: {
text: 'Traffic Sources',
style: {
fontWeight: 600,
},
},
dataLabels: {
enabled: true,
enabledOnSeries: [1]
},
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
xaxis: {
type: 'datetime'
},
yaxis: [{
title: {
text: 'Website Blog',
style: {
fontWeight: 600,
},
},
}, {
opposite: true,
title: {
text: 'Social Media',
style: {
fontWeight: 600,
},
}
}],
colors: colors
};
}
HTML
<apx-chart [series]="lineChart.series" [chart]="lineChart.chart" [yaxis]="lineChart.yaxis"
[xaxis]="lineChart.xaxis" [labels]="lineChart.labels" [stroke]="lineChart.stroke" [title]="lineChart.title"
[dataLabels]="lineChart.dataLabels" [fill]="lineChart.fill" [tooltip]="lineChart.tooltip" [colors]="lineChart.colors"></apx-chart>
|
| Timeline Charts |
Javascript
basicTimelineChart: any;
this._basicTimelineChart('["--vz-primary"]');
Component (Component js)
private _basicTimelineChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.basicTimelineChart = {
series: [
{
data: [
{
x: "Code",
y: [
new Date("2019-03-02").getTime(),
new Date("2019-03-04").getTime(),
],
},
{
x: "Test",
y: [
new Date("2019-03-04").getTime(),
new Date("2019-03-08").getTime(),
],
},
{
x: "Validation",
y: [
new Date("2019-03-08").getTime(),
new Date("2019-03-12").getTime(),
],
},
{
x: "Deployment",
y: [
new Date("2019-03-12").getTime(),
new Date("2019-03-18").getTime(),
],
},
],
},
],
chart: {
height: 350,
type: "rangeBar",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
type: "datetime",
},
colors: colors,
};
}
HTML
<apx-chart [series]="basicTimelineChart.series" [chart]="basicTimelineChart.chart"
[plotOptions]="basicTimelineChart.plotOptions" [xaxis]="basicTimelineChart.xaxis"
[colors]="basicTimelineChart.colors"></apx-chart>
|
| Bubble Charts |
Javascript
bubbleChart: any;
this._BubbleChart('["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger"]');
Component (Component js)
private _BubbleChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.BubbleChart = {
series: [
{
name: "Product1",
data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
{
name: "Product2",
data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
{
name: "Product3",
data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
{
name: "Product4",
data: this.generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
min: 10,
max: 60,
}),
},
],
chart: {
height: 350,
type: "bubble",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
fill: {
type: "gradient",
},
title: {
text: "3D Bubble Chart",
style: {
fontWeight: 500,
},
},
xaxis: {
tickAmount: 12,
type: "datetime",
labels: {
rotate: 0,
},
},
yaxis: {
max: 70,
},
theme: {
palette: "palette2",
},
colors: colors,
};
}
HTML
<apx-chart [series]="simpleBubbleChart.series" [chart]="simpleBubbleChart.chart"
[xaxis]="simpleBubbleChart.xaxis" [fill]="simpleBubbleChart.fill"
[dataLabels]="simpleBubbleChart.dataLabels" [title]="simpleBubbleChart.title"
[yaxis]="simpleBubbleChart.yaxis" [colors]="simpleBubbleChart.colors"></apx-chart>
|
| Pie Charts |
Javascript
simplePieChart: any;
this._simplePieChart('["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]');
Component (Component js)
private _simplePieChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.simplePieChart = {
series: [44, 55, 13, 43, 22],
chart: {
height: 300,
type: "pie",
},
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
legend: {
position: "bottom",
},
dataLabels: {
dropShadow: {
enabled: false,
},
},
colors: colors,
};
}
HTML
<apx-chart [series]="simplePieChart.series" [chart]="simplePieChart.chart"
[labels]="simplePieChart.labels" [legend]="simplePieChart.legend"
[dataLabels]="simplePieChart.dataLabels" [responsive]="simplePieChart.responsive"
[colors]="simplePieChart.colors"></apx-chart>
|
| Radialbar Charts |
Javascript
basicRadialbarChart: any;
this._basicRadialbarChart('["--vz-success"]');
Component (Component js)
private _basicRadialbarChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.basicRadialbarChart = {
series: [70],
chart: {
height: 350,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
size: "70%",
},
},
},
labels: ["Cricket"],
colors: colors,
};
}
HTML
<apx-chart [series]="basicRadialbarChart.series" [chart]="basicRadialbarChart.chart"
[plotOptions]="basicRadialbarChart.plotOptions" [labels]="basicRadialbarChart.labels"
[colors]="basicRadialbarChart.colors"></apx-chart>
|
| Radar Charts |
Javascript
basicRadarChart: any;
this._basicRadarChart('["--vz-success"]');
Component (Component js)
private _basicRadarChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.basicRadarChart = {
series: [
{
name: "Series 1",
data: [80, 50, 30, 40, 100, 20],
},
],
chart: {
height: 350,
type: "radar",
toolbar: {
show: false,
},
},
stroke: {
colors: colors,
},
xaxis: {
categories: ["January", "February", "March", "April", "May", "June"],
},
colors: colors
};
}
HTML
<apx-chart [series]="basicRadarChart.series" [chart]="basicRadarChart.chart"
[xaxis]="basicRadarChart.xaxis" [stroke]="basicRadarChart.stroke"></apx-chart>
|
| Polararea Charts |
Javascript
basicPolarChart: any;
this._basicPolarChart('["--vz-primary", "--vz-success", "--vz-warning","--vz-danger", "--vz-info", "--vz-success", "--vz-primary", "--vz-dark", "--vz-secondary"]');
Component (Component js)
private _basicPolarChart(colors:any) {
colors = this.getChartColorsArray(colors);
this.basicPolarChart = {
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
chart: {
type: "polarArea",
width: 400,
},
labels: [
"Series A",
"Series B",
"Series C",
"Series D",
"Series E",
"Series F",
"Series G",
"Series H",
"Series I",
],
stroke: {
colors: ["#fff"],
},
fill: {
opacity: 0.8,
},
legend: {
position: "bottom",
},
colors: colors,
};
}
HTML
<apx-chart [series]="basicPolarChart.series" [chart]="basicPolarChart.chart"
[labels]="basicPolarChart.labels" [stroke]="basicPolarChart.stroke"
[fill]="basicPolarChart.fill" [legend]="basicPolarChart.legend"
[colors]="basicPolarChart.colors"></apx-chart>
|
