Skip to content

mhtghn/nativescript-ui-highcharts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NativeScript Highcharts

⚠️ If you are using NativeScript 7.0.0 and above: Use this package @mhtghn/nativescript-highcharts

downloads License: MIT

NPM

This plugins allows you to use Highcharts in NativeScript.

Screenshots

Demo IOS      Demo Android

Demo IOS      Demo Android

Demo IOS      Demo Android

Demo IOS      Demo Android

Demo IOS      Demo Android

Demo apps

NativeScript-Core (XML)

Check out the demo folder. This is how to clone and run it:

git clone https://github.com/mhtghn/nativescript-ui-highcharts
cd nativescript-ui-highcharts/src
npm run demo.ios # or demo.android

NativeScript-Angular

Check out the demo-angular folder. This is how to clone and run it:

git clone https://github.com/mhtghn/nativescript-ui-highcharts
cd nativescript-ui-highcharts/src
npm run demo-angular.ios # or demo-angular.android

Installation

tns plugin add nativescript-ui-highcharts

Usage

NativeScript-Core

TypeScript

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

...
export class HomeViewModel extends Observable {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };
    chartOptionsString = JSON.stringify(this.chartOptions);
    ...
}

XML

<Page class="page"
    navigatingTo="onNavigatingTo"
    xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:ui="nativescript-ui-highcharts">

    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>

    <GridLayout>
        <!-- Add your page content here -->
        <ui:Highcharts options="{{chartOptionsString}}"></ui:Highcharts>
    </GridLayout>
</Page>

NativeScript Angular

TypeScript

Import the HighchartsModule in your module.

...
import {HighchartsModule} from "nativescript-ui-highcharts/angular";

@NgModule({
    imports: [
        ...
        HighchartsModule
    ],
    ...
})
export class HomeModule { }

Create your Highcharts options object just like you did with plain Highcharts. You can find all the possible options there. Then convert the options to a string because for now you have to pass the options as a string to the plugin.

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    chartOptions = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    };

    chartOptionsString = JSON.stringify(this.chartOptions);
    ...
}

HTML

<ActionBar class="action-bar">
<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page">
    <!-- Add your page content here -->
    <Highcharts options="{{chartOptionsString}}"></Highcharts>
</GridLayout>

Highcharts Compatibility

  • highcharts.js: v7.2.0
  • highcharts-more.js: v7.2.0
  • highcharts-3d.js: v7.2.0
  • sankey.js: v7.2.0
  • organization.js: v7.2.0

About performance

This plugin is addressed to people who really want to use Highcharts in their NS apps. Because it uses a WebView to display the chart. So performance-wise it is not the best solution. If you want a pure native solution you should use NativeScript UI's Chart component

Tips

  • Add the next option to the chart options to disable the display of the Highcharts.com Hyperlink in the webview
    credits: {
       enabled: false
    }

Credit

This plugin is greatly inspired by this demo from Eddy Verbruggen

About

This plugins allows you to use Highcharts in NativeScript.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published