| Line Charts |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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 |
Typescript
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>
|
