I used the example code in this link
github.com/.../dcc272cee4f6dd633a06979e4c78d87ce96ed60e
to create a scatter chart.
Here is the code....
<igx-data-chart #chart [dataSource]="myData" isTransitionInEnabled="true" transitionInMode="Auto" titleTextColor="Blue" titleTextStyle="12pt Verdana" width="1200px" height="700px">
<igx-numeric-y-axis #xAxis name="xAxis" [labelLocation]="xLabelLoc" > </igx-numeric-y-axis> <igx-numeric-y-axis #yAxis name="yAxis" > </igx-numeric-y-axis>
</igx-data-chart> Code
...
@ViewChild("chart")public chart: IgxDataChartComponent;@ViewChild("xAxis")public xAxis: IgxNumericXAxisComponent;@ViewChild("yAxis")public yAxis: IgxNumericYAxisComponent;
....
const series1 = new IgxScatterLineSeriesComponent();
series1.name = "series1";series1.xAxis = this.xAxis;series1.yAxis = this.yAxis;series1.thickness = 2;series1.markerType = MarkerType.Circle;series1.showDefaultTooltip = false;
this.chart.series.clear();this.chart.series.add(series1);
This last line where I am trying to add the series1 to series collection of the chart throws below error.
Error TS2345 (TS) Argument of type 'IgxScatterLineSeriesComponent' is not assignable to parameter of type 'IgxSeriesComponent'.Types of property 'i' are incompatible.Type 'ScatterLineSeries' is not assignable to type 'Series'.Types of property 'dv' are incompatible.Type '(a: Rect, b: Rect, c: SeriesView) => boolean' is missing the following properties from type 'Dictionary$2<string, SeriesView>': $tKey, $tValue, j, k, and 37 more.
and when I do a ng serve, it throws another error...
ERROR in ./node_modules/igniteui-angular-charts/ES5/DomainChart.jsModule not found: Error: Can't resolve 'igniteui-angular-core/ES5/ObservableColorCollection' in 'C:\Code\InQuestCloud\dev\BallDrop\CTXLite\ClientApp\node_modules\igniteui-angular-charts\ES5'
I recently upgraded from angular chars from version 6.2.2 to 7.2.2
Below is my package.json
"dependencies": {"@angular/animations": "^7.2.0","@angular/cdk": "^7.3.3","@angular/common": "7.2.0","@angular/compiler": "7.2.0","@angular/core": "7.2.0","@angular/forms": "7.2.0","@angular/http": "7.2.0","@angular/material": "^7.3.3","@angular/platform-browser": "7.2.0","@angular/platform-browser-dynamic": "7.2.0","@angular/platform-server": "7.2.0","@angular/router": "7.2.0","@ng-bootstrap/ng-bootstrap": "^4.1.1","@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5","angular-tree-component": "^8.2.0","aspnet-prerendering": "^3.0.1","bootstrap": "^3.3.7","core-js": "^2.4.1","d3": "^5.9.1","file-saver": "^2.0.0","font-awesome": "^4.7.0","guid-typescript": "^1.0.9","igniteui-angular": "^7.1.1","igniteui-angular-charts": "^7.2.2","igniteui-angular-core": "^6.2.2","jquery": "^3.2.1","rxjs": "^6.3.3","tslib": "^1.9.0","zone.js": "^0.8.27"},"devDependencies": {"@angular-devkit/build-angular": "^0.13.8","@angular/cli": "^7.3.8","@angular/compiler-cli": "^7.2.6","@angular/language-service": "7.2.0","@types/file-saver": "^2.0.0","@types/jasmine": "~2.8.3","@types/jasminewd2": "~2.0.2","@types/node": "~6.0.60","codelyzer": "^4.0.1","jasmine-core": "~2.8.0","jasmine-spec-reporter": "~4.2.1","karma": "^4.1.0","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "^1.2.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","protractor": "^5.4.2","ts-node": "~4.1.0","tslint": "~5.9.1","typescript": "3.2.2"},"optionalDependencies": {"node-sass": "^4.11.0"}
Can anyone please help me in resolving this issue? Thanks
Hello,
Thank you for contacting Infragistics!
Looking at your code and package.json here is what I see. First in your html you have two y-axis. You need to have a y and an x axis. In your package.json you have different versions for the following ignite ui packages:
igniteui-angularigniteui-angular-chartsigniteui-angular-core
You will want to make sure to have matching numbers on those packages, especially for the charts and core packages.