Please share basic installation process to load d3.js graph integrated with
ASP.Net Core,
Angular6 application. My code is giving this error.
"Error: Unexpected token <"
What I have tried:
I am installing d3.js in my project using "npm install ng2-ndv3 --save".
Then importing in NgModule and also imported d3 and nvd3 as below.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import 'd3';
import 'nvd3'
import {NvD3Module} from "ng2-nvd3";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NvD3Module,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Then adding following code in component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
options: any;
data: any;
constructor() {
this.options = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
return d.key;
},
y: function (d) {
return d.y;
},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
this.data = [
{
key: "P60-1",
y: 256
},
{
key: "P60-2",
y: 445
},
{
key: "P40",
y: 225
},
{
key: "P73",
y: 127
},
{
key: "P71",
y: 128
}
];
}
}
Then finally adding in component.html page
<pre><div>
<nvd3 [options]="options" [data]="data"></nvd3>
</div>