This demo uses imperative chart updates. The generated code is a faithful Angular translation: open it in CodeSandbox to run and tweak.
import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import {
ChartComponent,
ApexAxisChartSeries,
ApexNonAxisChartSeries,
ApexChart,
ApexXAxis,
ApexYAxis,
ApexTitleSubtitle,
ApexDataLabels,
ApexStroke,
ApexFill,
ApexLegend,
ApexTooltip,
ApexMarkers,
ApexPlotOptions,
ApexResponsive,
ApexGrid,
ApexAnnotations,
ApexStates,
ApexTheme,
NgApexchartsModule,
} from 'ng-apexcharts';
export type ChartOptions = {
series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
chart?: ApexChart;
xaxis?: ApexXAxis;
yaxis?: ApexYAxis | ApexYAxis[];
title?: ApexTitleSubtitle;
subtitle?: ApexTitleSubtitle;
dataLabels?: ApexDataLabels;
stroke?: ApexStroke;
fill?: ApexFill;
legend?: ApexLegend;
tooltip?: ApexTooltip;
markers?: ApexMarkers;
plotOptions?: ApexPlotOptions;
responsive?: ApexResponsive[];
grid?: ApexGrid;
annotations?: ApexAnnotations;
states?: ApexStates;
theme?: ApexTheme;
colors?: string[];
labels?: any;
};
@Component({
selector: 'app-chart',
standalone: true,
imports: [NgApexchartsModule],
templateUrl: './chart.component.html',
})
export class AppChart implements AfterViewInit, OnDestroy {
@ViewChild('chart') chart!: ChartComponent;
private seriesData: any = [{
x: new Date(2016, 01, 01),
y: [51.98, 56.29, 51.59, 53.85]
},
{
x: new Date(2016, 02, 01),
y: [53.66, 54.99, 51.35, 52.95]
},
{
x: new Date(2016, 03, 01),
y: [52.96, 53.78, 51.54, 52.48]
},
{
x: new Date(2016, 04, 01),
y: [52.54, 52.79, 47.88, 49.24]
},
{
x: new Date(2016, 05, 01),
y: [49.10, 52.86, 47.70, 52.78]
},
{
x: new Date(2016, 06, 01),
y: [52.83, 53.48, 50.32, 52.29]
},
{
x: new Date(2016, 07, 01),
y: [52.20, 54.48, 51.64, 52.58]
},
{
x: new Date(2016, 08, 01),
y: [52.76, 57.35, 52.15, 57.03]
},
{
x: new Date(2016, 09, 01),
y: [57.04, 58.15, 48.88, 56.19]
},
{
x: new Date(2016, 10, 01),
y: [56.09, 58.85, 55.48, 58.79]
},
{
x: new Date(2016, 11, 01),
y: [58.78, 59.65, 58.23, 59.05]
},
{
x: new Date(2017, 00, 01),
y: [59.37, 61.11, 59.35, 60.34]
},
{
x: new Date(2017, 01, 01),
y: [60.40, 60.52, 56.71, 56.93]
},
{
x: new Date(2017, 02, 01),
y: [57.02, 59.71, 56.04, 56.82]
},
{
x: new Date(2017, 03, 01),
y: [56.97, 59.62, 54.77, 59.30]
},
{
x: new Date(2017, 04, 01),
y: [59.11, 62.29, 59.10, 59.85]
},
{
x: new Date(2017, 05, 01),
y: [59.97, 60.11, 55.66, 58.42]
},
{
x: new Date(2017, 06, 01),
y: [58.34, 60.93, 56.75, 57.42]
},
{
x: new Date(2017, 07, 01),
y: [57.76, 58.08, 51.18, 54.71]
},
{
x: new Date(2017, 08, 01),
y: [54.80, 61.42, 53.18, 57.35]
},
{
x: new Date(2017, 09, 01),
y: [57.56, 63.09, 57.00, 62.99]
},
{
x: new Date(2017, 10, 01),
y: [62.89, 63.42, 59.72, 61.76]
},
{
x: new Date(2017, 11, 01),
y: [61.71, 64.15, 61.29, 63.04]
}
];
private seriesDataLinear: any = [{
x: new Date(2016, 01, 01),
y: 3.85
},
{
x: new Date(2016, 02, 01),
y: 2.95
},
{
x: new Date(2016, 03, 01),
y: -12.48
},
{
x: new Date(2016, 04, 01),
y: 19.24
},
{
x: new Date(2016, 05, 01),
y: 12.78
},
{
x: new Date(2016, 06, 01),
y: 22.29
},
{
x: new Date(2016, 07, 01),
y: -12.58
},
{
x: new Date(2016, 08, 01),
y: -17.03
},
{
x: new Date(2016, 09, 01),
y: -19.19
},
{
x: new Date(2016, 10, 01),
y: -28.79
},
{
x: new Date(2016, 11, 01),
y: -39.05
},
{
x: new Date(2017, 00, 01),
y: 20.34
},
{
x: new Date(2017, 01, 01),
y: 36.93
},
{
x: new Date(2017, 02, 01),
y: 36.82
},
{
x: new Date(2017, 03, 01),
y: 29.30
},
{
x: new Date(2017, 04, 01),
y: 39.85
},
{
x: new Date(2017, 05, 01),
y: 28.42
},
{
x: new Date(2017, 06, 01),
y: 37.42
},
{
x: new Date(2017, 07, 01),
y: 24.71
},
{
x: new Date(2017, 08, 01),
y: 37.35
},
{
x: new Date(2017, 09, 01),
y: 32.99
},
{
x: new Date(2017, 10, 01),
y: 31.76
},
{
x: new Date(2017, 11, 01),
y: 43.04
}
];
private seriesData7: any = [{
x: new Date(2016, 01, 01),
y: [1151.98, 1156.29, 1151.59, 1153.85]
},
{
x: new Date(2016, 02, 01),
y: [1153.66, 1154.99, 1151.35, 1152.95]
},
{
x: new Date(2016, 03, 01),
y: [1152.96, 1153.78, 1151.54, 1152.48]
},
{
x: new Date(2016, 04, 01),
y: [1152.54, 1152.79, 1147.88, 1149.24]
},
{
x: new Date(2016, 05, 01),
y: [1149.10, 1152.86, 1147.70, 1152.78]
},
{
x: new Date(2016, 06, 01),
y: [1152.83, 1153.48, 1150.32, 1152.29]
},
{
x: new Date(2016, 07, 01),
y: [1152.20, 1154.48, 1151.64, 1152.58]
},
{
x: new Date(2016, 08, 01),
y: [1152.76, 1157.35, 1152.15, 1157.03]
},
{
x: new Date(2016, 09, 01),
y: [1157.04, 1158.15, 1148.88, 1156.19]
},
{
x: new Date(2016, 10, 01),
y: [1156.09, 1158.85, 1155.48, 1158.79]
},
{
x: new Date(2016, 11, 01),
y: [1158.78, 1159.65, 1158.23, 1159.05]
},
{
x: new Date(2017, 00, 01),
y: [1159.37, 1161.11, 1159.35, 1160.34]
},
{
x: new Date(2017, 01, 01),
y: [1160.40, 1160.52, 1156.71, 1156.93]
},
{
x: new Date(2017, 02, 01),
y: [1157.02, 1159.71, 1156.04, 1156.82]
},
{
x: new Date(2017, 03, 01),
y: [1156.97, 1159.62, 1154.77, 1159.30]
},
{
x: new Date(2017, 04, 01),
y: [1159.11, 1162.29, 1159.10, 1159.85]
},
{
x: new Date(2017, 05, 01),
y: [1159.97, 1160.11, 1155.66, 1158.42]
},
{
x: new Date(2017, 06, 01),
y: [1158.34, 1160.93, 1156.75, 1157.42]
},
{
x: new Date(2017, 07, 01),
y: [1157.76, 1158.08, 1151.18, 1154.71]
},
{
x: new Date(2017, 08, 01),
y: [1154.80, 1161.42, 1153.18, 1157.35]
},
{
x: new Date(2017, 09, 01),
y: [1157.56, 1163.09, 1157.00, 1162.99]
},
{
x: new Date(2017, 10, 01),
y: [1162.89, 1163.42, 1159.72, 1161.76]
},
{
x: new Date(2017, 11, 01),
y: [1161.71, 1164.15, 1161.29, 1163.04]
}
];
private seriesData2: any = [{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33]
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11]
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65]
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24]
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47]
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31]
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02]
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02]
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01]
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02]
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91]
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612]
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612]
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95]
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67]
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4]
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9]
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45]
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35]
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53]
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19]
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620]
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620]
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61]
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58]
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86]
},
{
x: new Date(1538825400000),
y: [6598.86, 6598.88, 6570, 6587.16]
},
{
x: new Date(1538827200000),
y: [6588.86, 6600, 6580, 6593.4]
},
{
x: new Date(1538829000000),
y: [6593.99, 6598.89, 6585, 6587.81]
},
{
x: new Date(1538830800000),
y: [6587.81, 6592.73, 6567.14, 6578]
},
{
x: new Date(1538832600000),
y: [6578.35, 6581.72, 6567.39, 6579]
},
{
x: new Date(1538834400000),
y: [6579.38, 6580.92, 6566.77, 6575.96]
},
{
x: new Date(1538836200000),
y: [6575.96, 6589, 6571.77, 6588.92]
},
{
x: new Date(1538838000000),
y: [6588.92, 6594, 6577.55, 6589.22]
},
{
x: new Date(1538839800000),
y: [6589.3, 6598.89, 6589.1, 6596.08]
},
{
x: new Date(1538841600000),
y: [6597.5, 6600, 6588.39, 6596.25]
},
{
x: new Date(1538843400000),
y: [6598.03, 6600, 6588.73, 6595.97]
},
{
x: new Date(1538845200000),
y: [6595.97, 6602.01, 6588.17, 6602]
},
{
x: new Date(1538847000000),
y: [6602, 6607, 6596.51, 6599.95]
},
{
x: new Date(1538848800000),
y: [6600.63, 6601.21, 6590.39, 6591.02]
},
{
x: new Date(1538850600000),
y: [6591.02, 6603.08, 6591, 6591]
},
{
x: new Date(1538852400000),
y: [6591, 6601.32, 6585, 6592]
},
{
x: new Date(1538854200000),
y: [6593.13, 6596.01, 6590, 6593.34]
},
{
x: new Date(1538856000000),
y: [6593.34, 6604.76, 6582.63, 6593.86]
},
{
x: new Date(1538857800000),
y: [6593.86, 6604.28, 6586.57, 6600.01]
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6592.78, 6596.25]
},
{
x: new Date(1538861400000),
y: [6596.25, 6604.2, 6590, 6602.99]
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6584.99, 6587.81]
},
{
x: new Date(1538865000000),
y: [6587.81, 6595, 6583.27, 6591.96]
},
{
x: new Date(1538866800000),
y: [6591.97, 6596.07, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6598.21, 6587.6, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6601, 6590, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6605, 6596.61, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6589.14, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6599.09, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.99, 6597.5, 6603.86]
},
{
x: new Date(1538883000000),
y: [6603.85, 6605, 6600, 6604.07]
},
{
x: new Date(1538884800000),
y: [6604.98, 6606, 6604.07, 6606]
},
];
private seriesData3: any = [{
x: new Date(1538867400000),
y: [6591.08, 6592.22, 6588.9, 6592]
},
{
x: new Date(1538867700000),
y: [6592.01, 6596.07, 6592, 6593.51]
},
{
x: new Date(1538868000000),
y: [6593.51, 6596.03, 6588.04, 6588.04]
},
{
x: new Date(1538868300000),
y: [6588.26, 6592.78, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6593.99, 6587.6, 6593.99]
},
{
x: new Date(1538868900000),
y: [6594, 6596.76, 6593.02, 6594.01]
},
{
x: new Date(1538869200000),
y: [6596, 6597, 6593.05, 6595.65]
},
{
x: new Date(1538869500000),
y: [6595.66, 6596.3, 6590.04, 6591.68]
},
{
x: new Date(1538869800000),
y: [6593.26, 6597.97, 6590.37, 6595.43]
},
{
x: new Date(1538870100000),
y: [6595.43, 6598.21, 6593.49, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6600, 6594.15, 6594.8]
},
{
x: new Date(1538870700000),
y: [6595.01, 6599.8, 6594, 6598.78]
},
{
x: new Date(1538871000000),
y: [6598.77, 6598.79, 6594, 6594.28]
},
{
x: new Date(1538871300000),
y: [6594.28, 6596.2, 6591.92, 6594.01]
},
{
x: new Date(1538871600000),
y: [6594.51, 6601, 6590, 6599.59]
},
{
x: new Date(1538871900000),
y: [6593.6, 6599.58, 6593.6, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6602.05, 6596.61, 6601.65]
},
{
x: new Date(1538872500000),
y: [6602.05, 6602.94, 6597.5, 6600.05]
},
{
x: new Date(1538872800000),
y: [6602.96, 6603, 6600.37, 6601.4]
},
{
x: new Date(1538873100000),
y: [6601.39, 6601.43, 6600.5, 6601.4]
},
{
x: new Date(1538873400000),
y: [6601.42, 6605, 6600.5, 6600.64]
},
{
x: new Date(1538873700000),
y: [6600.64, 6603.84, 6600, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6598.28, 6600.48]
},
{
x: new Date(1538874300000),
y: [6601.73, 6605, 6600.59, 6601.54]
},
{
x: new Date(1538874600000),
y: [6602.8, 6605, 6600, 6600.01]
},
{
x: new Date(1538874900000),
y: [6600, 6600.22, 6589.19, 6590.64]
},
{
x: new Date(1538875200000),
y: [6593.95, 6598, 6589.14, 6591.44]
},
{
x: new Date(1538875500000),
y: [6591.48, 6593.45, 6589.15, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6598, 6592, 6595.85]
},
{
x: new Date(1538876100000),
y: [6595.85, 6601.76, 6595.83, 6601.72]
},
{
x: new Date(1538876400000),
y: [6601.69, 6605, 6598.52, 6602.01]
},
{
x: new Date(1538876700000),
y: [6602.02, 6604.4, 6601.51, 6601.62]
},
{
x: new Date(1538877000000),
y: [6601.74, 6602.88, 6599.09, 6600]
},
{
x: new Date(1538877300000),
y: [6599.35, 6605, 6599.09, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6600.79, 6604.13]
},
{
x: new Date(1538877900000),
y: [6603.06, 6604.45, 6601.25, 6602.06]
},
{
x: new Date(1538878200000),
y: [6602.06, 6604, 6600.93, 6602.11]
},
{
x: new Date(1538878500000),
y: [6602.25, 6602.41, 6599.09, 6602.41]
},
{
x: new Date(1538878800000),
y: [6602.41, 6603.95, 6600.02, 6603.89]
},
{
x: new Date(1538879100000),
y: [6603.89, 6604.44, 6602.52, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6600.02]
},
{
x: new Date(1538879700000),
y: [6600.02, 6602.99, 6600, 6600.23]
},
{
x: new Date(1538880000000),
y: [6600.85, 6604.43, 6600.2, 6602.1]
},
{
x: new Date(1538880300000),
y: [6602.19, 6604.42, 6601.7, 6603.97]
},
{
x: new Date(1538880600000),
y: [6602.49, 6603.99, 6600.07, 6600.32]
},
{
x: new Date(1538880900000),
y: [6600.32, 6603.5, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.61, 6600.31, 6602.62]
},
{
x: new Date(1538881500000),
y: [6601.57, 6603.9, 6597.5, 6601.74]
},
{
x: new Date(1538881800000),
y: [6600, 6601.73, 6598.01, 6598.62]
},
{
x: new Date(1538882100000),
y: [6598.61, 6603.9, 6598.61, 6600.09]
},
{
x: new Date(1538882400000),
y: [6600.09, 6603.99, 6600, 6602.08]
},
{
x: new Date(1538882700000),
y: [6602.07, 6603.99, 6602.07, 6603.86]
},
{
x: new Date(1538883000000),
y: [6603.85, 6604.41, 6602.09, 6602.26]
},
{
x: new Date(1538883300000),
y: [6602.6, 6605, 6602.24, 6603.02]
},
{
x: new Date(1538883600000),
y: [6603.01, 6604.98, 6600, 6601.03]
},
{
x: new Date(1538883900000),
y: [6601.81, 6602.6, 6601.02, 6602.3]
},
{
x: new Date(1538884200000),
y: [6601.72, 6604.98, 6601.1, 6604.03]
},
{
x: new Date(1538884500000),
y: [6604.17, 6604.98, 6604.02, 6604.07]
},
{
x: new Date(1538884800000),
y: [6604.98, 6606, 6604.07, 6605.01]
},
{
x: new Date(1538885100000),
y: [6605, 6607.52, 6605, 6607.28]
},
];
private seriesData4: any = [{
x: new Date(1538858700000),
y: [6603.08, 6604.28, 6596.01, 6600.01]
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6597, 6599.76]
},
{
x: new Date(1538860500000),
y: [6597.53, 6599.75, 6592.78, 6596.25]
},
{
x: new Date(1538861400000),
y: [6596.25, 6603, 6590, 6603]
},
{
x: new Date(1538862300000),
y: [6602.73, 6604.2, 6596.72, 6602.99]
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6591.06, 6591.06]
},
{
x: new Date(1538864100000),
y: [6591.06, 6598.4, 6584.99, 6587.81]
},
{
x: new Date(1538865000000),
y: [6587.81, 6594.99, 6583.27, 6592.43]
},
{
x: new Date(1538865900000),
y: [6592.46, 6595, 6587.07, 6591.96]
},
{
x: new Date(1538866800000),
y: [6591.97, 6592.22, 6588.62, 6592]
},
{
x: new Date(1538867700000),
y: [6592.01, 6596.07, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6597, 6587.6, 6595.65]
},
{
x: new Date(1538869500000),
y: [6595.66, 6598.21, 6590.04, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6600, 6594, 6594.28]
},
{
x: new Date(1538871300000),
y: [6594.28, 6601, 6590, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6603, 6596.61, 6601.4]
},
{
x: new Date(1538873100000),
y: [6601.39, 6605, 6600, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6598.28, 6600.01]
},
{
x: new Date(1538874900000),
y: [6600, 6600.22, 6589.14, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6602.01]
},
{
x: new Date(1538876700000),
y: [6602.02, 6605, 6599.09, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6600.79, 6602.11]
},
{
x: new Date(1538878500000),
y: [6602.25, 6604.44, 6599.09, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6602.1]
},
{
x: new Date(1538880300000),
y: [6602.19, 6604.42, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.9, 6597.5, 6598.62]
},
{
x: new Date(1538882100000),
y: [6598.61, 6603.99, 6598.61, 6603.86]
},
{
x: new Date(1538883000000),
y: [6603.85, 6605, 6600, 6601.03]
},
{
x: new Date(1538883900000),
y: [6601.81, 6604.98, 6601.02, 6604.07]
},
{
x: new Date(1538884800000),
y: [6604.98, 6605.24, 6604.07, 6605.24]
},
];
private seriesData5: any = [{
x: 1538876100000,
y: [6595.85, 6601.76, 6595.83, 6601.72]
},
{
x: 1538876400000,
y: [6601.69, 6605, 6598.52, 6602.01]
},
{
x: 1538876700000,
y: [6602.02, 6604.4, 6601.51, 6601.62]
},
{
x: 1538877000000,
y: [6601.74, 6602.88, 6599.09, 6600]
},
{
x: 1538877300000,
y: [6599.35, 6605, 6599.09, 6603.06]
},
{
x: 1538877600000,
y: [6603.07, 6604.5, 6600.79, 6604.13]
},
{
x: 1538877900000,
y: [6603.06, 6604.45, 6601.25, 6602.06]
},
{
x: 1538878200000,
y: [6602.06, 6604, 6600.93, 6602.11]
},
{
x: 1538878500000,
y: [6602.25, 6602.41, 6599.09, 6602.41]
},
{
x: 1538878800000,
y: [6602.41, 6603.95, 6600.02, 6603.89]
},
{
x: 1538879100000,
y: [6603.89, 6604.44, 6602.52, 6603.89]
},
{
x: 1538879400000,
y: [6604.44, 6604.44, 6600, 6600.02]
},
{
x: 1538879700000,
y: [6600.02, 6602.99, 6600, 6600.23]
},
{
x: 1538880000000,
y: [6600.85, 6604.43, 6600.2, 6602.1]
},
{
x: 1538880300000,
y: [6602.19, 6604.42, 6601.7, 6603.97]
},
{
x: 1538880600000,
y: [6602.49, 6603.99, 6600.07, 6600.32]
},
{
x: 1538880900000,
y: [6600.32, 6603.5, 6600, 6603.5]
},
{
x: 1538881200000,
y: [6603.5, 6603.61, 6600.31, 6602.62]
},
{
x: 1538881500000,
y: [6601.57, 6603.9, 6597.5, 6601.74]
},
{
x: 1538881800000,
y: [6600, 6601.73, 6598.01, 6598.62]
},
{
x: 1538882100000,
y: [6598.61, 6603.9, 6598.61, 6600.09]
},
{
x: 1538882400000,
y: [6600.09, 6603.99, 6600, 6602.08]
},
{
x: 1538882700000,
y: [6602.07, 6603.99, 6602.07, 6603.86]
},
{
x: 1538883000000,
y: [6603.85, 6604.41, 6602.09, 6602.26]
},
{
x: 1538883300000,
y: [6602.6, 6605, 6602.24, 6603.02]
},
{
x: 1538883600000,
y: [6603.01, 6604.98, 6600, 6601.03]
},
{
x: 1538883900000,
y: [6601.81, 6602.6, 6601.02, 6602.3]
},
{
x: 1538884200000,
y: [6601.72, 6604.98, 6601.1, 6604.03]
},
{
x: 1538884500000,
y: [6604.17, 6604.98, 6604.02, 6604.07]
},
{
x: 1538884800000,
y: [6604.98, 6605.7, 6604.07, 6604.28]
},
];
private seriesData6: any = [{
x: new Date(1538856000000),
y: [6593.34, 6600, 6582.63, 6600]
},
{
x: new Date(1538856900000),
y: [6595.16, 6604.76, 6590.73, 6593.86]
},
{
x: new Date(1538857800000),
y: [6593.86, 6604.28, 6586.57, 6601.17]
},
{
x: new Date(1538858700000),
y: [6603.08, 6604.28, 6596.01, 6600.01]
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6597, 6599.76]
},
{
x: new Date(1538860500000),
y: [6597.53, 6599.75, 6592.78, 6596.25]
},
{
x: new Date(1538861400000),
y: [6596.25, 6603, 6590, 6603]
},
{
x: new Date(1538862300000),
y: [6602.73, 6604.2, 6596.72, 6602.99]
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6591.06, 6591.06]
},
{
x: new Date(1538864100000),
y: [6591.06, 6598.4, 6584.99, 6587.81]
},
{
x: new Date(1538865000000),
y: [6587.81, 6594.99, 6583.27, 6592.43]
},
{
x: new Date(1538865900000),
y: [6592.46, 6595, 6587.07, 6591.96]
},
{
x: new Date(1538866800000),
y: [6591.97, 6592.22, 6588.62, 6592]
},
{
x: new Date(1538867700000),
y: [6592.01, 6596.07, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6597, 6587.6, 6595.65]
},
{
x: new Date(1538869500000),
y: [6595.66, 6598.21, 6590.04, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6600, 6594, 6594.28]
},
{
x: new Date(1538871300000),
y: [6594.28, 6601, 6590, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6603, 6596.61, 6601.4]
},
{
x: new Date(1538873100000),
y: [6601.39, 6605, 6600, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6598.28, 6600.01]
},
{
x: new Date(1538874900000),
y: [6600, 6600.22, 6589.14, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6602.01]
},
{
x: new Date(1538876700000),
y: [6602.02, 6605, 6599.09, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6600.79, 6602.11]
},
{
x: new Date(1538878500000),
y: [6602.25, 6604.44, 6599.09, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6602.1]
},
{
x: new Date(1538880300000),
y: [6602.19, 6604.42, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.9, 6597.5, 6598.62]
},
{
x: new Date(1538882100000),
y: [6598.61, 6603.9, 6598.61, 6600.09]
},
];
private formatCandleLabel = (val: any): any => {
var months = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
]
var d = new Date(val)
var pad = function (n) {
return (n < 10 ? '0' : '') + n
}
return (
months[d.getMonth()] +
' ' +
pad(d.getDate()) +
' ' +
pad(d.getHours()) +
':' +
pad(d.getMinutes())
)
};
public chartOptions: Partial<ChartOptions> = {
series: [
{
name: 'candle',
data: [
{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33],
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11],
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65],
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24],
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47],
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31],
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02],
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02],
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01],
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02],
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91],
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612],
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612],
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95],
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67],
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4],
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9],
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45],
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35],
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53],
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19],
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620],
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620],
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61],
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58],
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86],
},
{
x: new Date(1538825400000),
y: [6598.86, 6598.88, 6570, 6587.16],
},
{
x: new Date(1538827200000),
y: [6588.86, 6600, 6580, 6593.4],
},
{
x: new Date(1538829000000),
y: [6593.99, 6598.89, 6585, 6587.81],
},
{
x: new Date(1538830800000),
y: [6587.81, 6592.73, 6567.14, 6578],
},
{
x: new Date(1538832600000),
y: [6578.35, 6581.72, 6567.39, 6579],
},
{
x: new Date(1538834400000),
y: [6579.38, 6580.92, 6566.77, 6575.96],
},
{
x: new Date(1538836200000),
y: [6575.96, 6589, 6571.77, 6588.92],
},
{
x: new Date(1538838000000),
y: [6588.92, 6594, 6577.55, 6589.22],
},
{
x: new Date(1538839800000),
y: [6589.3, 6598.89, 6589.1, 6596.08],
},
{
x: new Date(1538841600000),
y: [6597.5, 6600, 6588.39, 6596.25],
},
{
x: new Date(1538843400000),
y: [6598.03, 6600, 6588.73, 6595.97],
},
{
x: new Date(1538845200000),
y: [6595.97, 6602.01, 6588.17, 6602],
},
{
x: new Date(1538847000000),
y: [6602, 6607, 6596.51, 6599.95],
},
{
x: new Date(1538848800000),
y: [6600.63, 6601.21, 6590.39, 6591.02],
},
{
x: new Date(1538850600000),
y: [6591.02, 6603.08, 6591, 6591],
},
{
x: new Date(1538852400000),
y: [6591, 6601.32, 6585, 6592],
},
{
x: new Date(1538854200000),
y: [6593.13, 6596.01, 6590, 6593.34],
},
{
x: new Date(1538856000000),
y: [6593.34, 6604.76, 6582.63, 6593.86],
},
{
x: new Date(1538857800000),
y: [6593.86, 6604.28, 6586.57, 6600.01],
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6592.78, 6596.25],
},
{
x: new Date(1538861400000),
y: [6596.25, 6604.2, 6590, 6602.99],
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6584.99, 6587.81],
},
{
x: new Date(1538865000000),
y: [6587.81, 6595, 6583.27, 6591.96],
},
{
x: new Date(1538866800000),
y: [6591.97, 6596.07, 6585, 6588.39],
},
{
x: new Date(1538868600000),
y: [6587.6, 6598.21, 6587.6, 6594.27],
},
{
x: new Date(1538870400000),
y: [6596.44, 6601, 6590, 6596.55],
},
{
x: new Date(1538872200000),
y: [6598.91, 6605, 6596.61, 6600.02],
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6589.14, 6593.01],
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6603.06],
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6599.09, 6603.89],
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6603.5],
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.99, 6597.5, 6603.86],
},
{
x: new Date(1538883000000),
y: [6603.85, 6605, 6600, 6604.07],
},
{
x: new Date(1538884800000),
y: [6604.98, 6606, 6604.07, 6606],
},
],
},
],
chart: {
height: 350,
type: 'candlestick',
},
title: {
text: 'CandleStick Chart - Category X-axis',
align: 'left',
},
annotations: {
xaxis: [
{
x: 'Oct 06 14:00',
borderColor: '#00E396',
label: {
borderColor: '#00E396',
style: {
fontSize: '12px',
color: '#fff',
background: '#00E396',
},
orientation: 'horizontal',
offsetY: 7,
text: 'News Release',
},
},
],
},
tooltip: {
enabled: true,
},
xaxis: {
type: 'category',
labels: {
formatter: (val) => {
return this.formatCandleLabel(val)
},
},
},
yaxis: {
tooltip: {
enabled: true,
},
},
plotOptions: {
candlestick: {
type: 'ohlc',
},
},
stroke: {
width: 2,
},
};
ngAfterViewInit() {
(window as any).ApexCharts.setLicense('APEX-eyJpc3N1ZURhdGUiOiIyMDI2LTA0LTE2IiwiZXhwaXJ5RGF0ZSI6IjIwNTItMDQtMTciLCJwbGFuIjoiZW50ZXJwcmlzZSIsImRvbWFpbnMiOlsiYXBleGNoYXJ0cy5jb20iLCIxMjcuMC4wLjEiXX0=');
}
ngOnDestroy() {
// no cleanup needed
}
}