Trying to use highcharts inside web-view. Does not work


I got a problem. I need to use highcharts in mobile app. So I decided to use web-view. And it does not work neither on iOS nor on Android.

I have 3 questions:

  1. I’ve tried to launch simple highchairs demo in my web view. Something went wrong. What I did wrong in the code below ? I suppose the problem is with loading js scripts.

HTML code inside the web-view component is the following :

<html lang="en" >
    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <title>How to create active charts using Highcharts | Script Tutorials</title>

    <script src=""></script>
    <script src=""></script>


    <div>SOME DIV HTML WORKS</div>

    <div id="chart_1" class="chart"></div>
    <script type='text/javascript'>
    $(document).ready(function() {

// First chart initialization
var chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'area',
    height: 350,
 title: {
    text: 'Tools developers plans to use to make html5 games (in %)'
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 yAxis: {
    title: {
       text: 'Interviewed'
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]


my component.ts is enabling web-view like that :

import { Component, ElementRef, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { WebView, LoadEventData } from "ui/web-view";

import { generateChartHtml } from '../../utils/chart-util';

    selector : 'my-app',
    templateUrl : 'pages/chart/chart.html',
    styleUrls: ["pages/chart/chart-common.css", "pages/chart/chart.css"]

export class ChartComponent {
    webViewSrc: string = "~/pages/chart/webview.html";

here is my component.html :

<WebView height="200" width="300" [src]="webViewSrc"></WebView>

code above does not launch my test chart neither in iOS nor in Android :frowning: But it does show simple div :

I have :
tns - 3.0.1
angular - 4

And my second question is : It is related to this issue 1659.

  1. How can I load local files by html inside the web-view?

Issue 1659’s solution is outdated I suppose. And it says nothing about iOS. And its not said what would be root for html file when it would try to load css/js file. For example here

   <link rel="stylesheet" href="/form.css"/>

And the last one :

  1. I don’t know would it try to load form.css from the root of machine, or from some ‘local’ root, i.e. current folder. How should i specify path correctly here?

Thanks in advance for the help


Hi, I just added your chart to my Angular app without problems. What I did was:

  • Add this to my html: <WebView height="200" width="300" [src]="webViewSrc"></WebView>.
  • Add chart.html to the ~/pages/intro folder.
  • Add webViewSrc: string = "~/pages/intro/chart.html"; as a property to the component.


Hey! Thank you for your answer! I did what you’ve said - but unfortunately It did not help me :frowning:
Web view shows my html - I added simple div above the chart container and I can see it :

But chart still does not launch :frowning: I think something is wrong with js here. I updated my post above due to code changes You suggested, and added 2 more questions.

Thank you again for answer :slight_smile:


Well I simply added your webview html as-is, so the code was fine. Are you allowing requests to the domains the webview is pointing to?


should I somehow enable anything in my emulator or in my project? Enable js in web view, or enable requests to remote websites? I’ve mentioned this in my console:


Yes, Google that message, it’s exactly what I was afraid of.


found the solution! . And could you please give answers to last 2 questions? Thank you!

I’ve changed my web view html code to the following :

<html lang="en" >
    <meta charset="utf-8" />
    <link rel="stylesheet" href="~/pages/chart/test.css">
  <div class="haha">HAHA</div>

Added link to css file which I put here

And this css file does not apply it’s css :frowning:


What if you change ~/pages/chart/test.css to just chart-common.css Don’t bother with platform-specific css yet, let’s first try to find what the correct folder is. In my experience it’s simply relative to the folder your webview html file is in.


that works! Man thank you very much! You saved me :slight_smile: