Charting: Need to use nvd3 to replace nv-chart with minimal changes

Ionic Framework ionic-v3
1

The current apps was using nv -chart for charting, but I found that it does not support candlesticks chart.
However, nvd3 has the candlesticks functions.
http://j3ko.github.io/nv-chart/
http://krispo.github.io/angular-nvd3/#/candlestickBarChart

I am thinking just to make a minor changes do convert from line chart to candlesticks but instead it shows a blank chart, replacing the sample code of nvd3 seems not workable.

Below is the code for nv-chart

controller.js
// chart option functions
// top chart x axis
var xTickFormat = function(d) {
var dx = $scope.myData[0].values[d] && $scope.myData[0].values[d].x || 0;
if (dx > 0) {
return d3.time.format("%b %d")(new Date(dx));
}
return null;
};

    // bottom chart x axis
    var x2TickFormat = function(d) {
      var dx = $scope.myData[0].values[d] && $scope.myData[0].values[d].x || 0;
      return d3.time.format('%b %Y')(new Date(dx));
    };


    var y1TickFormat = function(d) {
      return d3.format(',f')(d);
    };

    // top chart y axis price
    var y2TickFormat = function(d) {
      return d3.format('s')(d);
    };

    // bottom chart y axis volume
    var y3TickFormat = function(d) {
      return d3.format(',.2s')(d);
    };

    var y4TickFormat = function(d) {
      return d3.format(',.2s')(d);
    };

    var xValueFunction = function(d, i) {
      return i;
    };

    var marginBottom = ($window.innerWidth / 100) * 10;

  $scope.chartOptions = {
      chartType: 'linePlusBarWithFocusChart',
      data: 'myData',
      margin: {top: 15, right: 0, bottom: marginBottom, left: 0},
      interpolate: "cardinal",
      useInteractiveGuideline: false,
      yShowMaxMin: false,
      tooltips: false,
      showLegend: false,
      useVoronoi: false,
      xShowMaxMin: false,
      xValue: xValueFunction,
      xAxisTickFormat: xTickFormat,
      x2AxisTickFormat: x2TickFormat,
      y1AxisTickFormat: y1TickFormat,
      y2AxisTickFormat: y2TickFormat,
      y3AxisTickFormat: y3TickFormat,
      y4AxisTickFormat: y4TickFormat,
      transitionDuration: 500
  	};

stock.html
<div ng-if="chartView == 4" nv-chart="chartOptions" id="interactiveChart"></div>

style.css
/* Chart Styles */

#interactiveChart {
  height: 80vmin;
}

.nv-focus .nv-barsWrap, /* top chart volume bars */
.nv-focus .nv-y1 .tick, /* top chart left y axis lines bars */
.nv-focus .nv-y1 .nv-axisMaxMin, /* top chart left y axis max/min values */
.nv-focus .nv-y1 .domain, /* top chart left y axis bounding box */
.nv-context .nv-x .nv-axisMaxMin, /* bottom chart */
.nv-context .nv-y2 .domain,
.nv-context .nv-y2 .nv-axisMaxMin,
.nv-context .nv-y2 .tick {
  display: none !important;
}

.nv-focus .nv-x .tick:first-of-type text,
#interactiveChart text.nv-axislabel {
  text-anchor: start !important;
}

.nv-focus .nv-y2 .tick text,
.nv-focus .nv-y2 .nv-axisMaxMin text,
.nv-focus .nv-x .tick:last-of-type text,
.nv-context .nv-y1 .tick text,
.nv-context .nv-y1 .nv-axisMaxMin text {
  text-anchor: end !important;
}

#interactiveChart svg text {
  font-size: 3vmin !important;
}

#interactiveChart .nv-axis line /* interior grid */ {
  stroke-dasharray: 3,3;
  stroke: #ddd;
}

#interactiveChart .nv-axis path.domain /* both charts' bounding boxes */ {
  stroke-dasharray: 4,4;
  stroke-opacity: .5;
  stroke-width: 1px;
}

#interactiveChart .nv-focus .domain /* top chart bounding box color */ {
  stroke: #1e88e5;
}

#interactiveChart .nv-focus .nv-axislabel,
#interactiveChart .nv-focus .nv-axisMaxMin text /* top chart label and max/min values colors */ {
  fill: #1e88e5;
}

#interactiveChart .nv-context .domain /* bottom chart */ {
  stroke: #ff9800;
}

#interactiveChart .nv-context .nv-axislabel,
#interactiveChart .nv-context .nv-axisMaxMin text {
  fill: #ff9800;
}

#interactiveChart .nv-focus .nv-y2 .tick text,
#interactiveChart .nv-context .nv-y1 .tick text /* both charts' y axis interior range values colors */ {
  fill: #ccc;
}

#interactiveChart .nv-focus .nv-line /* top chart price line */ {
  stroke: #2196f3;
  stroke-width: 2px;
}

#interactiveChart .nv-context .nv-line /* bottom chart price line */ {
  stroke: #aaa;
  stroke-opacity: .75;
  stroke-width: 1px;
}

#interactiveChart .nv-line {
  stroke-linecap: round;
  stroke-linejoin: round;
}

#interactiveChart .nv-barsWrap rect /* bottom chart volume bars */ {
  fill: #ff9800;
  fill-opacity: 1;
  shape-rendering: crispEdges;
}

#interactiveChart .nv-brushBackground rect /* context chart range scroller */ {
  shape-rendering: crispEdges;
  stroke-width: 1;
  stroke: #ccc;
}

The view is as below but i just want to change to candlesticks with the volume chart, bellow price chart remains the same. Any possibility?

2

Is nvd3 can replace nv-chart without major changes?
Need someone that experience to advice

3

ANy one familiar with nvd3?
need advice
thanks