My goal was to retrieve data from a Http Post response and display it as a data series in Highcharts. This is the approach I took:
simplechart.component.ts:
import { Component, OnInit } from '@angular/core';
//import { ChartModule } from 'angular-highcharts';
import { Chart } from 'angular-highcharts';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
interface UserResponse {
login: string,
bio: string,
company: string
}
@Component({
selector: 'app-simplechart',
templateUrl: './simplechart.component.html',
styleUrls: ['./simplechart.component.css']
})
export class SimplechartComponent implements OnInit {
// Your code here...
simplechart.component.html:
<div [chart]="chart"></div>
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular-highcharts';
import { AppComponent } from './app.component';
import { SimplechartComponent } from './components/chart-demo/simplechart/simplechart.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
SimplechartComponent
],
imports: [
BrowserModule,
ChartModule,
HttpClientModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
package.json:
{
"name": "charts",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
// Dependencies
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.0.",
"main": "karma.conf.js",
"author": ""
}
It seems like the Highchart layout is displaying but not the values. Any ideas on how to troubleshoot this issue? You can check the picture here.