0

I am trying to modify the linewithFocusChart's focus properties (the focus being the small navigable viewport beneath the main chart) using the focus options (focusEnable, focusHeight, etc). These options are not having any affect on my graph though. I am using Angular-nvD3 directives. Any ideas?

HTML

<nvd3 options="options" data="data" config="config"></nvd3>

Angular controller

$scope.options = {
        chart: {
            type: 'lineWithFocusChart',
            height: 350,
            margin : {
                "top": 20,
                  "right": 40,
                  "bottom": 60,
                  "left": 40
            },
            focusEnable:true,
            focusHeight: 80,
            focusShowAxisX: true,
            focusShowAxisY: false,
            brushExtent: [new Date(1427846400000), new Date(1435708800000)],
            xAxis: {
                axisLabel: '',
                tickFormat: function(d){
                    return  d3.time.format('%b-%Y')(
                                            new Date(d))
                }
            },
            x2Axis: {
                tickFormat: function(d){
                    return  d3.time.format('%b/%Y')(
                                            new Date(d))
                }
            },
            yAxis: {
                axisLabel: '',
                tickFormat: function(d){
                    return d3.format(',d')(d);
                },
                rotateYLabel: false
            },
            y2Axis: {
                tickFormat: function(d){
                    return d3.format(',')(d);
                }
            },
            tooltip: {
                distance: 0,
                duration: 100,
                hideDelay: 100
            },
            tooltipContent: function (key, x, y, e) {
                return '<h3>' + e.point.y + '</h3>' +
                    '<p>' + x + '</p>';
            }
        }
    };
user1824797
  • 89
  • 2
  • 11

2 Answers2

0

From a quick look at the source code, the option you are looking for is focusHeight.

{
  "chart": {
    "type": "linePlusBarChart",
    "height": 500,
    "margin": {
      "top": 30,
      "right": 75,
      "bottom": 50,
      "left": 75
    },
    "bars": {
      "forceY": [
        0
      ]
    },
    "bars2": {
      "forceY": [
        0
      ]
    },
    "color": [
      "#2ca02c",
      "darkred"
    ],
    "xAxis": {
      "axisLabel": "X Axis"
    },
    "x2Axis": {
      "showMaxMin": false
    },
    "y1Axis": {
      "axisLabel": "Y1 Axis"
    },
    "y2Axis": {
      "axisLabel": "Y2 Axis"
    },
    "y3Axis": {},
    "y4Axis": {},
    "transitionDuration": 250,
    "focusHeight": 300 //<-- ADD THIS
  }
}
Mark
  • 106,305
  • 20
  • 172
  • 230
  • focusHeight does effect the height when rendered in the example, http://krispo.github.io/angular-nvd3/#/linePlusBarWithFocusChart. However, it is not having an effect when I'm using it as an option in my angular controller. – user1824797 Jul 30 '15 at 13:53
0

The reason the options did not work for me was because I was using an outdated version of angular-nvd3 directive -- one in which the aforementioned options were not supported. I uninstalled angular-directive, nvd3, and d3 with bower, and updated to angular-directive v1.0.0-rc2, nvd3 v1.8.1 by running the following command:

bower install angular-nvd3#1.0.0-rc.2 --save

Problem resolved!

user1824797
  • 89
  • 2
  • 11