Ionic D3.js piechart does not render

Question

Having trouble with rendering the piechart using nvd3.js in Ionic 1.0.1 Any Help will be appreciated

**IONIC PAGE CODE **

<ion-view class="layouts-view">
 <!--  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
   -->
     <ion-nav-back-button >
        <i class="ion-arrow-left-c"></i> Back
     </ion-nav-back-button>
  <ion-nav-title>
    <span>Report Charts</span>
  </ion-nav-title>
  <ion-content>


        <div class="item item-divider">
            Pie chart 2 - interactive
        </div>
        <div class="item item-text-wrap" >
             <nvd3 options="vm.options" data="vm.data3" config="config"  ></nvd3>
        </div>

  </ion-content>

- CONTROLLER -

$scope.vm = {};

        $scope.vm.data3 = [
            {
                key: "One",
                y: 5
            },
            {
                key: "Two",
                y: 2
            },
            {
                key: "Three",
                y: 9
            },
            {
                key: "Four",
                y: 7
            },
            {
                key: "Five",
                y: 4
            },
            {
                key: "Six",
                y: 3
            },
            {
                key: "Seven",
                y: 5
            }
        ];

$scope.vm.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
                    }
                }
            }
        };

My system information: Cordova CLI: 6.1.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 1.0.1 Ionic CLI Version: 2.1.1 Ionic App Lib Version: 2.1.1 OS: Distributor ID: SUSE LINUX Description: openSUSE Leap 42.1 (x86_64) Node Version: v0.12.7

Robin Rodricks Robin Rodricks · Accepted Answer · 2017-03-12T07:20:30

Use NDV3 or check this guide for code to use D3 with Ionic.

Edit: if you still have issues then can you try embedding the chrome web browser using this command ionic browser add crosswalk. I think your problem is the on-device browser does not support SVG.

Ionic D3.js piechart does not render

1 Answers