I've been trying to solve this problem since 2 days..
I want to use apexcharts with angular 7.1.0 (the latest version of apexcharts and ng-apexcharts is not working, only version 3.15.2 for apexcharts & 1.5.0 for ng-apexcharts are working with me).
The error :
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'series' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'series' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div id="chart">
<apx-chart [ERROR ->][series]="chartOptions.series"
"): ng:///MainModule/DashboardComponent.html@653:71
Can't bind to 'chart' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'chart' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ries]="chartOptions.series"
[ERROR ->][chart]="chartOptions.chart"
"): ng:///MainModule/DashboardComponent.html@654:71
Can't bind to 'dataLabels' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'dataLabels' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("chart]="chartOptions.chart"
[ERROR ->][dataLabels]="chartOptions.dataLabels"
"): ng:///MainModule/DashboardComponent.html@655:71
Can't bind to 'plotOptions' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'plotOptions' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("]="chartOptions.dataLabels"
[ERROR ->][plotOptions]="chartOptions.plotOptions"
"): ng:///MainModule/DashboardComponent.html@656:71
Can't bind to 'yaxis' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'yaxis' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("="chartOptions.plotOptions"
[ERROR ->][yaxis]="chartOptions.yaxis"
"): ng:///MainModule/DashboardComponent.html@657:71
Can't bind to 'xaxis' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'xaxis' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("yaxis]="chartOptions.yaxis"
[ERROR ->][xaxis]="chartOptions.xaxis"
"): ng:///MainModule/DashboardComponent.html@658:71
Can't bind to 'fill' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'fill' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("xaxis]="chartOptions.xaxis"
[ERROR ->][fill]="chartOptions.fill"
[t"): ng:///MainModule/DashboardComponent.html@659:71
'apx-chart' is not a known element:
1. If 'apx-chart' is an Angular component, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div id="chart">
[ERROR ->]<apx-chart [series]="chartOptions.series"
"): ng:///MainModule/DashboardComponent.html@653:60
Error: Template parse errors:
Can't bind to 'series' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'series' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div id="chart">
<apx-chart [ERROR ->][series]="chartOptions.series"
"): ng:///MainModule/DashboardComponent.html@653:71
Can't bind to 'chart' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'chart' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ries]="chartOptions.series"
[ERROR ->][chart]="chartOptions.chart"
"): ng:///MainModule/DashboardComponent.html@654:71
Can't bind to 'dataLabels' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'dataLabels' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("chart]="chartOptions.chart"
[ERROR ->][dataLabels]="chartOptions.dataLabels"
"): ng:///MainModule/DashboardComponent.html@655:71
Can't bind to 'plotOptions' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'plotOptions' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("]="chartOptions.dataLabels"
[ERROR ->][plotOptions]="chartOptions.plotOptions"
"): ng:///MainModule/DashboardComponent.html@656:71
Can't bind to 'yaxis' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'yaxis' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("="chartOptions.plotOptions"
[ERROR ->][yaxis]="chartOptions.yaxis"
"): ng:///MainModule/DashboardComponent.html@657:71
Can't bind to 'xaxis' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'xaxis' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("yaxis]="chartOptions.yaxis"
[ERROR ->][xaxis]="chartOptions.xaxis"
"): ng:///MainModule/DashboardComponent.html@658:71
Can't bind to 'fill' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'fill' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("xaxis]="chartOptions.xaxis"
[ERROR ->][fill]="chartOptions.fill"
[t"): ng:///MainModule/DashboardComponent.html@659:71
'apx-chart' is not a known element:
1. If 'apx-chart' is an Angular component, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div id="chart">
[ERROR ->]<apx-chart [series]="chartOptions.series"
"): ng:///MainModule/DashboardComponent.html@653:60
at syntaxError (compiler.js:2430:1)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605:1)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171:1)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158:1)
at compiler.js:26101:48
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101:1)
at compiler.js:26011:1
at Object.then (compiler.js:2421:33)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010:1)
at resolvePromise (zone.js:831:1)
at resolvePromise (zone.js:788:1)
at zone.js:892:1
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423:1)
at Object.onInvokeTask (core.js:17290:1)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422:1)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195:1)
at drainMicroTaskQueue (zone.js:601:1)
My code
app.module.ts
import { NgApexchartsModule } from "ng-apexcharts";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgApexchartsModule],
providers: [],
bootstrap: [AppComponent]
})
app.component.ts
import { Component, ViewChild } from "@angular/core";
import {
ApexAxisChartSeries,
ApexChart,
ChartComponent,
ApexDataLabels,
ApexPlotOptions,
ApexYAxis,
ApexTitleSubtitle,
ApexXAxis,
ApexFill
} from "ng-apexcharts";
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
dataLabels: ApexDataLabels;
plotOptions: ApexPlotOptions;
yaxis: ApexYAxis;
xaxis: ApexXAxis;
fill: ApexFill;
title: ApexTitleSubtitle;
};
export class theCharts implements OnInit {
@ViewChild('chart') chart: ChartComponent = {} as ChartComponent;
public chartOptions: Partial<any> = {} as Partial<any>;
constructor() {
}
ngOnInit() {
this.chartOptions = {
series: [
{
name: "Inflation",
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}
],
chart: {
height: 350,
type: "bar"
},
plotOptions: {
bar: {
dataLabels: {
position: "top" // top, center, bottom
}
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: "12px",
colors: ["#304758"]
}
},
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: {
type: "gradient",
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",
offsetY: 320,
align: "center",
style: {
color: "#444"
}
}
};
}
}
app.component.html
<div id="chart">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[dataLabels]="chartOptions.dataLabels"
[plotOptions]="chartOptions.plotOptions"
[yaxis]="chartOptions.yaxis"
[xaxis]="chartOptions.xaxis"
[fill]="chartOptions.fill"
[title]="chartOptions.title"
></apx-chart>
</div>
What i tried
- https://github.com/apexcharts/ng-apexcharts/issues/197
- https://github.com/apexcharts/ng-apexcharts/issues/190
- And other related and non-related topics across google.
Any suggestions ?