I'm having an issue when trying to create charts in Angular 10. While the chart doesn't have any problems rendering, I get this error when attempting to add a label to the first stock panel. The things I've tried so far include:
All of these have yielded no success, however when import working charts from other projects, they don't seem to run into the same issue.
import { Component, AfterViewInit } from '@angular/core';
import { AmChartsService, AmChart } from '@amcharts/amcharts3-angular';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements AfterViewInit {
private chart: AmChart;
private chartData = [{
"CalendarDate": "26/12/2019",
"Close": "72.48",
"HaveEarnings": "0",
"High": "72.5",
'ImpliedVol': "20.45",
'Low': "71.18",
'OBV': "0",
'Open': "71.21",
'Ovi5DayMA': "0.6706",
'OviNormalized': "0.9995",
'SMA20': "68.54",
'SMA50': "65.85",
'SMA200': "54.7",
'Vol_SMA21': "100603970",
'Volume': "89749400"
},
{
"CalendarDate": "27/12/2019",
"Close": "72.48",
"HaveEarnings": "1",
"High": "72.5",
'ImpliedVol': "20.45",
'Low': "71.18",
'OBV': "0",
'Open': "71.21",
'Ovi5DayMA': "0.6706",
'OviNormalized': "0.9995",
'SMA20': "68.54",
'SMA50': "65.85",
'SMA200': "54.7",
'Vol_SMA21': "100603970",
'Volume': "89749400"
},
{
"CalendarDate": "28/12/2019",
"Close": "72.48",
"HaveEarnings": "0",
"High": "72.5",
'ImpliedVol': "20.45",
'Low': "71.18",
'OBV': "0",
'Open': "71.21",
'Ovi5DayMA': "0.6706",
'OviNormalized': "0.9995",
'SMA20': "68.54",
'SMA50': "65.85",
'SMA200': "54.7",
'Vol_SMA21': "100603970",
'Volume': "89749400"
},
{
"CalendarDate": "29/12/2019",
"Close": "72.48",
"HaveEarnings": "0",
"High": "72.5",
'ImpliedVol': "20.45",
'Low': "71.18",
'OBV': "0",
'Open': "71.21",
'Ovi5DayMA': "0.6706",
'OviNormalized': "0.9995",
'SMA20': "68.54",
'SMA50': "65.85",
'SMA200': "54.7",
'Vol_SMA21': "100603970",
'Volume': "89749400"
},
{
"CalendarDate": "30/12/2019",
"Close": "72.48",
"HaveEarnings": "0",
"High": "72.5",
'ImpliedVol': "20.45",
'Low': "71.18",
'OBV': "0",
'Open': "71.21",
'Ovi5DayMA': "0.6706",
'OviNormalized': "0.9995",
'SMA20': "68.54",
'SMA50': "65.85",
'SMA200': "54.7",
'Vol_SMA21': "100603970",
'Volume': "89749400"
}]
constructor(private AmCharts: AmChartsService) { }
ngAfterViewInit(): void {
this.chart = this.AmCharts.makeChart('chartdiv', {
"type": "stock",
"mouseWheelScrollEnabled": true,
"pan": true,
"panEventsEnabled": true,
"color": "#FFFFFF",
"dataDateFormat": "DD/MM/YYYY",
"dataSets": [
{
"dataProvider": this.chartData,
"categoryField": "CalendarDate",
"fieldMappings": [{
"fromField": "Open",
"toField": "Open"
},
{
"fromField": "High",
"toField": "High"
},
{
"fromField": "Low",
"toField": "Low"
},
{
"fromField": "Close",
"toField": "Close"
},
{
"fromField": "Volume",
"toField": "Volume"
},
{
"fromField": "OviNormalized",
"toField": "OviNormalized"
},
{
"fromField": "OBV",
"toField": "OBV"
},
{
"fromField": "ImpliedVol",
"toField": "ImpliedVol"
},
{
"fromField": "HaveEarnings",
"toField": "HaveEarnings"
},
{
"fromField": "Ovi5DayMA",
"toField": "Ovi5DayMA"
},
{
"fromField": "SMA20",
"toField": "SMA20"
},
{
"fromField": "SMA50",
"toField": "SMA50"
},
{
"fromField": "SMA200",
"toField": "SMA200"
},
{
"fromField": "Vol_SMA21",
"toField": "Vol_SMA21"
}]
}
],
'panels': [
{
"drawingIconsEnabled": false,
"iconSize": 20,
"title": 'AAPL',
'color': '#FFFFFF',
'marginTop': 30,
'panEventsEnabled': false,
'percentHeight': 55,
"stockGraphs": [
{
"id": "g1",
"type": 'candlestick',
'openField': 'Open',
'closeField': 'Close',
'highField': "High",
"lowField": "Low",
"valueField": "Close",
"lineColor": "#009933",
"fillColors": "#009933",
"negativeLineColor": "#FF0000",
"negativeFillColors": "#FF0000",
"proCandlesticks": true,
'fillAlphas': 1,
'useDatasetColors': false,
'showBalloon': false,
'legendValueText': 'Open:[[Open]] | High:[[High]] | Low:[[Low]] | Close:[[Close]]'
}
],
"stockLegend": {
'markerType': 'none',
'markerSize': 0,
'valueTextRegular': undefined,
'valueWidth': 250,
'color': '#FFFFFF',
'verticalGap': 0,
'fontSize': 14
}
},
{
'title': 'OVI',
"showCategoryAxis": false,
'percentHeight': 15,
'allowTurningOff': true,
'stockGraphs': [
{
'lineThickness': 2,
'valueField': 'OviNormalized',
'type': 'smoothedLine',
'lineColor': '#0000D0',
'negativeLineColor': "#D00000",
'useDataSetColors': false
}
]
}
],
// "balloon": {
// "verticalPadding": 2
// },
"categoryAxis": {
"parseDates": true
},
"categoryAxesSettings": {
"equalSpacing": true,
"maxSeries": 0,
"startOnAxis": false,
"axisHeight": 15,
"axisThickness": -1,
"offset": -5,
"appendPeriods": 1
},
"panelsSettings": {
"columnWidth": 0.6,
"columnSpacing": 15,
"marginRight": 50,
"marginBottom": 2,
"marginTop": 2,
"numberFormatter": {
"precision": 2,
"decimalSeperator": '.',
'thousandsSeperator': ','
},
'backgroundAlpha': 0,
'backgroundColor': '#F0F0F0',
'panelSpacing': 1,
'plotAreaFillAlphas': 1,
'plotAreaFillColors': ["#FFFFF4"],
'usePrefixes': true,
'color': '#FFFFFF'
},
'chartScrollbarSettings': {
'backgroundColor': '#FFFFE7',
'selectedBackgroundAlpha': 1,
'selectedGraphFillAlpha': 1,
'selectedBackgroundColor': '#66C285',
'selectedGraphFillColor': '#009933',
'graphFillColor': '#66C285',
'selectedGraphLineAlpha': 1,
'selectedGraphLineColor': 'black',
'height': 15,
'usePeriod': 'WW'
},
'periodSelector': {
'position': 'bottom',
'periods': [
{
'period': 'MM',
'selected': false,
'count': 4,
'label': '4 mths'
},
{
'period': 'MM',
'selected': false,
'count': 7,
'label': '7 mths'
},
{
'period': 'MM',
'selected': false,
'count': 9,
'label': '9 mths'
},
{
'period': 'YYYY',
'selected': false,
'count': 1,
'label': '1 yr'
},
]
}
});
this.chart.panels[0].addLabel(0, "35%", "OVI", "center", 20, "#0000FF", 0, 0.2, true);
this.chart.validateData();
}
}
The mock data isn't supposed to actually represent anything but more of a means to just populate the dataProvider property. All the scripts are also in the right order in my index.html file
I'm having an issue when trying to create charts in Angular 10. While the chart doesn't have any problems rendering, I get this error when attempting to add a label to the first stock panel. The things I've tried so far include:
All of these have yielded no success, however when import working charts from other projects, they don't seem to run into the same issue.
Here's the code for my chart
The mock data isn't supposed to actually represent anything but more of a means to just populate the dataProvider property. All the scripts are also in the right order in my index.html file