novus / nvd3

A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library

Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and the NVD3 community.

View Examples | NEW Documentation! | Development build status:

Usage

Simply add the nv.d3 assets to your project and include them in your HTML.

<link href="nv.d3.min.css" rel="stylesheet">
<script src="nv.d3.min.js"></script>

• nv.d3.js should appear after d3.js is included.
• Prefer minified assets (.min) for production.

Dependencies

NVD3 is recommended to go with d3.js version 3.5.3 and later, but NOT d3 4.x yet. version 3.5.17 is the most recent d3 v3 release.

Minimum D3 version required: 3.4.4

For a D3v4 Version, see the work in progress at the nvd3 organization

Along with pieChart options padAngle and cornerRadius, the interactive guideline tooltip now requires these later versions of D3 (3.4.4+, specifically, to get interactive tooltips). The interactive guide lines rely on the more recent d3.bisector() method which treats accessors taking two parameters (the second being the element index) as comparators (see d3.bisector()).

Supported Browsers

NVD3 runs best on WebKit based browsers.

• Google Chrome: latest version
• Opera 15+ (i.e. webkit version)
• Safari: latest version
• Firefox: latest version
• Internet Explorer: 10+

Do we support D3 v4.x?

No, we do not... we are very interested in taking this on but could use some help. Please let us know if you'd like to help make this a reality! :)

Changelog

1.8.6 Changes:

• Community bugfixes

1.8.5 Changes:

• Community bugfixes
• New force-directed graph

1.8.4 Changes:

• Community bugfixes including tooltip fixes.

1.8.3 Changes:

• Lots of community bugfixes
• Added force-directed chart

1.8.2 Changes:

• Lots of community bugfixes and a few extra minor features

1.8.1 Changes:

• Tooltips were refactored - If you have customized your tooltips, note that you may need to adjust your custom functions as the data passed has changed format. See the new tooltip options for more details.
• Added boxplot charts | example
• Added candlestick charts | example
• Added extra donut chart abilities | examples
• Added sunburst Charts | example
• Time Series | example
• Another legend format available | example
• Lots of bug fixes (see closed issues)
• (for all examples, see here)

1.7.1 Changes:

• Fixed axis.staggerLabels bug.
• Fixed Karma unit tests.
• Fixed chart test pages.
• Merged in nvd3-community changes and development branch.

1.7.0 Changes:

• Fixes around 20 small bugs.
• Fixed the notorious slowness of line charts and scatter plots on chrome
• Combined the scatterChart and scatterChartWithLines models
• Combined the linePlusBarChart and linePlusBarChartWithFocus models.
• renamed some of the options (see the new documentation for what options are available for each chart)
• Completed the migration of the option functions to an object format which allows the generation of the documentation in an automated way. Not everything has a description yet, but check it out!
• Added extra options to the donut charts based on features that will be in d3 3.5. The donut example page loads the latest d3 from their 3.5 branch so keep that in mind.
• Added an example of the parallelCoordinates chart.
• Fixed up the half-done OHLC bar chart, and made an example for it as well.

1.6.0 Changes:

• includes about a dozen bug fixes and pull requests I fixed and merged in from the issues/pulls from the original project.
• It also standardized all indention

---

Current development focus

• Review outstanding pull requests and issues.
• Try to find an easy way to actually document usage and all chart options.
• Improve the testing framework.
• Setup continuous integration.

---

Bugs

Found a bug? Check out the latest from the master branch and make sure it's not already fixed first! If you don't see a related fix, please open an issue.

---

Optional dependencies

Including Fastdom in your project can greatly increase the performance of the line chart (particularly in Firefox and Internet Explorer) by batching DOM read and write operations to avoid layout thrashing. NVD3 will take advantage of Fastdom if present.

---

Contributing

If one of the existing models doesn't meet your needs, fork the project, implement the model and an example using it, send us a pull request, for consideration for inclusion in the project.

If you'd like to contribute consistently, show me what you've got with some good pull requests and you may get added to the nvd3-community org!

A few rules for pull requests

1. Please commit to the master branch
2. Do NOT check in anything under the build directory, it clutters up the commit and just gets overwritten later.
3. All new features must come with unit test coverage
4. Bug fixes should come with unit tests that prove their fix

If you want to test your changes using the example pages, you'll have to run grunt production to build the items into the build directory. You must do this before your changes show up in the examples, as they link to the build directory in order to properly show off the finished product. Please remember to NOT include the build files in your commit though, only include the source files you changed!

Tips for Testing

• Unit tests were written in Karma and Mocha. Follow instructions in Building Latest to get npm packages setup. This may not work on Windows machines.
• Run bower install to get bower dependencies.
• Run grunt to start the unit tests.
• Also visually inspect the HTML pages in the examples/ and test/ folders. Make sure there are no glaring errors.
• Novus now uses Travis CI for continuous integration. Visit our travis build page to see the latest status.

Meteor Tinytests

• Any Meteor-specific features can be tested from the command line using tinytest and Spacejam
• spacejam can be installed by running npm install -g spacejam.
• Tinytests can then be executed by running spacejam test-packages ./ from this project's root.

---

Building latest

1. First clone the repository and checkout the master branch
2. make sure nodejs is installed via your system's package manager.
3. Install grunt, grunt-cli, and bower: npm install -g grunt grunt-cli bower

have node download nvd3's required modules with: npm install

build with: grunt production

You should now have a build directory with the js and css files within.

---

nvd3's Issues

Align multiple Y-Axis at 0

Hey there,

I was just wondering if there is a way to align multiple y-axis to have 0 at the same coordinate. e.g. changing the linePlusBarChart example to contain negative values yields the following:

Is there a way to keep both yAxis 0 value at the same vertical position?

[All Bar Charts] Create a setting so that we can switch between the "half-bar" implementation or the "full-bar" implementation

Element Click Action Doesn't Fire

Is there a way to place a click event on a data point in a line chart model? I've tried through d3, and even though selectAll finds all the circles in the chart, the on click event doesn't fire when clicking on those circle, however, it does fire when you click on the circle in the legend (which is not what I want).

Series toggle broken with latest d3

When clicking the toggles for a line chart (and possibly others) you get the exception Uncaught TypeError: Cannot read property '1' of undefined

Here's is an example of the bug: http://jsfiddle.net/aRmjm/

[Stacked/Grouped Multi-Bar Chart] With high values, have problem with "margin" (top of graph)

An image is better than explain, see the espace in top of graph

Bars overflow top edge in some data scenarios

Bar charts, in specific cases, does not set Y Axis scale properly causing the bars with largest values render off chart area.

Example data set that causes problem is: (500000, 3000000, 250000)

The example I use is very straightforward:

       nv.addGraph(function() {
            var chart = nv.models.discreteBarChart()
                .x(function(d) { return d.label; })
                .y(function(d) { return d.value; })
                .tooltips(false)
                .showValues(true);

            chart.yAxis.tickFormat(numberFormatter);    // my custom Y Axis formatter

            d3.select(that.$node.get(0))
                .datum(historicalBarChart)    // data set including just the values given above
              .transition().duration(500)
                .call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
          });

Tooltips for pie chart are broken in IE 10

Tooltips for pie charts in Opera behave strangely (I used Opera 12). They appear and disappear when moving the mouse. Or appear when you click on a pie slice.
I do not know the reason for that, but it would be nice to fix it.
Thanks.

discreteBarChart force-nonZero-Y bug

Hello.
function nv.mode.discreteBar() || nv.model.discreteBarChart()
when you set custom forceY([10, 100]) property there is invalid bar-height (actually in domain 0...100)
https://github.com/novus/nvd3/blob/master/src/models/discreteBar.js
line 211
Math.max(Math.abs(y(getY(d,i)) - y(0)) || 1)
please consider change this line to something like
Math.max(Math.abs(y(getY(d,i)) - y(yDomain()[0])) || 1)
Thanks.

scatterChart performance excessively slow with thousands of data points

I am using scatterChart() to plot a data set that increases in size on a daily basis and have found that the plot's transition performance is growing slower and slower as the number of data points increases from the hundreds into the thousands. I'm wondering if this performance degradation has been experienced by other users and, if so, if there are any optimizations that can be made to improve this performance. I'm running these plots in the latest version of Chrome.

Add a CSS class to the <svg> element

Currently, your CSS uses "svg {}" to define styling for the graphs. Although this works, it potentially causes conflicts with other svg elements that may be on the page.

Can you please add a class to your svg elements when they're created, and use that in the CSS stylesheet?

Thank you.

Wrong display when displaying hidden div

If I create a svg in a hidden div (e.g. for tabs), then the svg isn't rendered correctly. A click on a button or area causes the chart to be rendered correctly.

Small example is here. Click on Open AreaChart. (Sorry for the messy code)

Series toggles now broken for pie chart

The toggles on the pie chart appear to be broken for the latest nvd3 on github. I have no idea when it broke, but everything works with http://nvd3.org/nv.d3.js. When I change to https://raw.github.com/novus/nvd3/master/nv.d3.js, I get an error "Uncaught TypeError: Object # has no method 'map' " on line 8132 of nv.d3.js. Same problem with the minified javascript.

As far as I can find, nothing else is affected.

What's the reason animations were removed from stackedAreaChart?

in this commit
8a846ef

Do you plan to introduce them back?

Large values do not trigger relayout of axes and cause truncation of text and label overlap.

You can repro this with the scatter / bubble chart in the live code section of nvd3.org

Change the Data(JSON) generator to:

for (j = 0; j < points; j++) {
data[i].values.push({
x: 100000.0 * random()
, y: 100000.0 * random()
, size: Math.random()
//, shape: shapes[j % 6]
});
}

Note how both axes have truncation issues in Chrome.

If this is an easy enough fix for someone just getting started with the codebase -- give me a hint on where this should live in the code I'm happy to investigate and provide a pull request.

[Line Chart] How to create an ordinal/discrete xAxis?

I thought that I could set scale of the axis by doing the following:

  var chart;
  var xScale = d3.scale.ordinal()
                  .domain(_.map(seriesDef[0].values, function(d) {
                    return d.x;
                  }))
                  // .rangeBands([0, seriesDef[0].values.length - 1]);


  nv.addGraph(function() {
    chart = nv.models.lineChart();

    chart.x(function(d, i) { return String(d.x); })
         .y(function(d) { return d.y; });

    chart.xAxis.scale(xScale);

    chart.yAxis
      .tickFormat(d3.format(',.2f'));

    d3.select(that.chartElement.find('svg')[0])
        .datum(seriesDef)
      .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });

Here's what seriesDef looks like:

{
  "area": false,
  "key": "Total Amount By Term",
  "values":
    [
      {
        "x": "199520",
        "y": 1119707
      },
      {
        "x": "199510",
        "y": 1253042
      },
      {
        "x": "199610",
        "y":  868849
      },
      {
        "x": "199540",
        "y": 50
      },
      {
        "x": "199430",
        "y":  6803
      },
      {
        "x": "199810",
        "y":  1850
      },
      {
        "x": "200820",
        "y":  30
      }
    ]
}

The xAxis still ends up looking like an interval

Any suggestions?

Tooltips don't work if parent element is a group element

Normal use case is:

var svg = d3.select("svg");
// setup
var chart = ...;
svg.datum(data)
  .call(chart)

Here tooltips of course work fine.

Instead I have multiple charts on the svg 'canvas' and I draw each graph into a separate <g> element:

var g = d3.select("g");
// setup
var chart = ...;
g.datum(data)
  .call(chart)

Here tooltips either fail to show up or in the case of lineChart throw an error in d3 as they attempt to determine the viewBox settings (line 3975 in the current source). Is there a way to make tooltips work in my case? (and the reason for submitting this as a bug report is to allow this feature in the mainstream source).

Tooltip placement incorrect with twitter bootstrap modal

I show a line chart via Twitter Bootstrap Modal.

The placement calculation gets somehow confused. Even window.events.ClientX and ClientY return strange values.

html view

<div id="metro-details-modal" class="modal hide fade" tabindex="-1" 
role="dialog" aria-labelledby="Details" aria-hidden="true">
</div>

javascript

    container.delegate('.element .metro-details .balance', 'click', function() {
        var id = $(this).parent().parent().parent().parent().parent().attr('data-id');
        $('#metro-details-modal').empty();
        var url = buildUrl('/api/users/stats/billing/' + id);
        d3.json(url, function(jsondata) {
            //to set color
            var data = [{
                    key : jsondata[0].key,
                    values : jsondata[0].values,
                    color : '#DD4814'
            }]

            nv.addGraph(function() {
                var margin = {top: 20, right: 20, bottom: 30, left: 50},
                    width = 750 - margin.left - margin.right,
                    height = 350 - margin.top - margin.bottom;

                var chart = nv.models.lineChart();
                chart.xAxis
                    .tickFormat(function(d) { return d3.time.format('%d.%m')(new Date(d))  });

                chart.yAxis
                    .axisLabel('Kontostand (€)')
                    .tickFormat(d3.format('.02f'));
                var svg =  d3.select('#metro-details-modal')
                    .append("svg:svg") 
                    .attr("width", width) 
                    .attr("height", height)  

                svg.datum(data)
                    .transition().duration(500)
                    .call(chart);

                $('#metro-details-modal').modal('show');
                nv.utils.windowResize(chart.update);
                return chart;
              }); 
        });
    });

Live Example

Live

1. Click on a user
2. Click on the number right from Kontostand

No explanation that the nv.d3.css file is required.

So I have just run into this issue, as have others before me: (http://stackoverflow.com/questions/13619436/large-black-circles-overlay-scatterchart).

If you don't reference the nv.d3.css file, then the graphs look completely broken (which isn't surprising) but there is no explanation anywhere that I can find that you need to include the css file in your html. And it's even hidden in the src folder rather than at the top level.

So some thoughts:

• The site/github pages could probably use some simple installation instructions which explain this (I am happy to write them).
• The css file should probably either be in the root of the project directory, or copied there as part of the build step to make it more obviously an asset, rather than hidden away as if it's a development only file.

I am happy to make both of these changes, but just wanted to check I am not missing something obvious before I do?

will it be compatible with d3.v3 ?

[QUESTION] Is it possible to scale one of two series in a bar chart?

Sorry, I don't know if there is another place to make this questions.

I have two series of data that are related (searches and clicks). The two series have similar appearance in the chart but the magnitude of the first is much greater than the latter so I would like to scale up the latter.

I'm currently doing it multiplying the values of the second series by 10 but I would like to show the real value in the tooltip.

Is it possible?

Accessing content in tooltips

I am trying to customize tooltip content for a scatterplot by using chart.tooltipContent . From the source code, I am able to access x, y and key. However, when I try to access other variables from my data, the tooltip shows up blank.

Here is a sample data set. My question is how can I pass the variable site to chart.tooltipContent?

[{ 
   key: "Manchuria", 
   values: [
      {yield: 27.00, variety: "Manchuria", year: 1931, site: "University Farm"},
      {yield: 48.87, variety: "Manchuria", year: 1931, site: "Waseca"},
      {yield: 27.43, variety: "Manchuria", year: 1931, site: "Morris"}
}]

Missing statement from Novus partners

The statement "with an explanation, apology, and commitment to its permanent status as an open-source project" from Novus partners seems to be missing from nvd3.org. Where has it gone?

[Bar plus line] If line has no data, x axis ticks disappear (even if bar has data)

Load a chart that has bar data but no line data. The x axis ticks disappear.

Line chart hover is broken when showing a flat line

When I show timeseries data using a lineChart, and all the points in the line have the same y value (i.e. a flat line is displayed) - when hovering over the points the wrong point is highlighted:

It seems that the path.nv-path-XXX elements inside g.nv-point-paths aren't the size they should be from some reason.

Here is an example, reproducible in the live code editor:

Chart Code

  nv.addGraph(function() {
    var chart = nv.models.lineChart()
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function(d) {
      return d3.time.format('%x')(new Date(d))
    });

    chart.yAxis.tickFormat(d3.format(',d'));

    d3.select('#chart svg')
      .datum(data)
      .transition().duration(500)
      .call(chart);

    return chart;
  });

Data

  [
    {
      "key": "Series 1",
      "values": [
        [ 1025409600000 , 1],
        [ 1025409610000 , 1],
        [ 1025409620000 , 1],
        [ 1025409630000 , 1],
        [ 1025409640000 , 1],
        [ 1025409650000 , 1],
      ]
    }
  ]

Markup

  <style>

  #chart svg {
    height: 400px;
  }

  </style>


  <div id="chart">
    <svg></svg>
  </div>

Try hovering over the line to highlight the points on it.
I have tested this on both latest chrome and latest Firefox.

If I change any of the points from 1 to any other numeric value, the problem goes away.

I'd be happy to provide more info (or help in any other way).

Thanks for an awesome library!

nvd3.min.js is wiped out after the latest commit

multiBarChart click fails with d3 v3

Building a multiBarChart with d3v3.js works, but clicking on a button returns an error.
Using d3v2.js makes thing works.

reduceXticks in all models

For graphs with dates on X-axis, in a short date range, the dates may repeat for multiple ticks. I believe reduceXTicks on multiBarChart model resolves this, but it's not implemented in multiChart or lineChart models and most others.

It was discussed here: http://stackoverflow.com/questions/14799511/how-can-i-keep-tick-marks-from-repeating-when-i-have-a-small-number-of-dates-on but I was wondering if there's a simpler solution of porting this function to other models?

linePlusBarChart.html does not work - bars are not drawn

I've spent multiple days trying to get the examples in both the live console and the examples directory working just to draw a simple bar chart. I'm curious where I should be looking for working copies? It really isn't clear what data format should be used for each chart. I suggest changing the live charts to use the example data format which is accepted by the chart instead of using functions to generate the data. This would really help folks learn and pickup your charting library.

I noticed in the example directory the data format for the test data is passed into a map function and remapped - is this something d3 would normally handle and you are just doing it for the sake of the example or do I need that in my code also?

Anyways - here is the specific error with the one example I am trying.

On load, the bars are not drawn, just the line. When deselecting the line, multiple errors appears in the javascript console:

Error: Problem parsing d="MNaN,-14886.89952325868LNaN,-15647.099487464346LNaN,-14172.899545385642LNaN,-12961.199573494292LNaN,-14571.899531896603LNaN,-12341.699593160929LNaN,-11816.699619341965LNaN,-14061.599537994782LNaN,-14038.499547523323LNaN,-15955.79947755232LNaN,-16816.799457896686LNaN,-19038.59937866465LNaN,-17606.39943190845LNaN,-17793.29941845821LNaN,-17558.099432733008LNaN,-19301.099370448246LNaN,-20747.99932993517LNaN,-25240.109180397463LNaN,-25418.39917976133LNaN,-27459.599109578445LNaN,-28870.79906856349LNaN,-32018.698963779156LNaN,-39679.49872196405LNaN,-38056.19877081632LNaN,-41386.798666609415LNaN,-28215.599085562644LNaN,-26044.199156851577LNaN,-29924.999030881794LNaN,-36319.49882732094LNaN,-39427.498726776685LNaN,-34952.3988703471LNaN,-33169.498927218745LNaN,-35391.29885558126LNaN,-23658.599231721997LNaN,-22383.89927109702LNaN,-19250.699373254316LNaN,-17713.49941982878LNaN,-18717.29939034215LNaN,-18545.099392496544LNaN,-21865.19928982724LNaN,-26214.2991463611LNaN,-28310.099083741083LNaN,-29700.299034088064LNaN,-34101.898898739506LNaN,-35114.09886012542LNaN,-38713.49875198607LNaN,-39374.998723055585LNaN,-41771.09865396959LNaN,-44043.718572935504LNaN,-40123.22870705696LNaN,-42760.19861328711LNaN,-49139.998417114344LNaN,-54618.89823308766LNaN,-53734.79826984894LNaN,-52611.298296609835LNaN,-53812.49826777681LNaN,-50840.998352538394LNaN,-59377.498090379406LNaN,-62995.797962863755LNaN,-65131.49790658317LNaN,-67527.59781712512LNaN,-71047.19771680307LNaN,-73964.09761043606LNaN,-72976.57265487275LNaN,-73317.29763041264LNaN,-72834.29765966273LNaN,-70280.6977268628LNaN,-81790.7973718023LNaN,-80604.29739578656LNaN,-79867.19743322143LNaN,-84793.79726100151LNaN,-80051.99742697336LNaN,-84839.99725880208LNaN,-95650.79692764768LNaN,-113702.39633448425LNaN,-125695.49596632441LNaN,-122425.7960546144" localhost:1
Error: Problem parsing d="MNaN,-14886.9LNaN,-15647.1LNaN,-14172.9LNaN,-12961.199999999999LNaN,-14571.9LNaN,-12341.7LNaN,-11816.7LNaN,-14061.599999999999LNaN,-14038.499999999998LNaN,-15955.800000000001LNaN,-16816.8LNaN,-19038.6LNaN,-17606.4LNaN,-17793.3LNaN,-17558.1LNaN,-19301.1LNaN,-20748LNaN,-25240.11LNaN,-25418.4LNaN,-27459.6LNaN,-28870.8LNaN,-32018.7LNaN,-39679.5LNaN,-38056.2LNaN,-41386.8LNaN,-28215.600000000002LNaN,-26044.2LNaN,-29925LNaN,-36319.5LNaN,-39427.5LNaN,-34952.4LNaN,-33169.5LNaN,-35391.3LNaN,-23658.6LNaN,-22383.9LNaN,-19250.7LNaN,-17713.5LNaN,-18717.3LNaN,-18545.100000000002LNaN,-21865.2LNaN,-26214.3LNaN,-28310.100000000002LNaN,-29700.300000000003LNaN,-34101.899999999994LNaN,-35114.1LNaN,-38713.5LNaN,-39375LNaN,-41771.1LNaN,-44043.72LNaN,-40123.229999999996LNaN,-42760.200000000004LNaN,-49140LNaN,-54618.899999999994LNaN,-53734.799999999996LNaN,-52611.3LNaN,-53812.5LNaN,-50841LNaN,-59377.5LNaN,-62995.8LNaN,-65131.5LNaN,-67527.6LNaN,-71047.2LNaN,-73964.09999999999LNaN,-72976.575LNaN,-73317.3LNaN,-72834.3LNaN,-70280.7LNaN,-81790.8LNaN,-80604.3LNaN,-79867.2LNaN,-84793.79999999999LNaN,-80052LNaN,-84840LNaN,-95650.8LNaN,-113702.40000000001LNaN,-125695.49999999999LNaN,-122425.8"

LineChart causes extreme page height

Open http://nvd3.org/ghpages/line.html with IE 9. The height of the page will grow extremely (look at the scrollbar).

Any ideas? Would love to fix this.

[Stacked Area Chart] There is not enough space in the labels space for multiple series

Having 40+ series leads to several problems in the chart. I'm giving the series legends some extra space.

[Examples] No data for Cumulative Line Graph

The Cumulative Line Graph Example displays the message "No Data Available".

It looks like d3 cannot find cumulativeLineData.json in http://nvd3.org/ghpages/cumulativeLine.js.

Current HEAD commit on master breaks line chart model

Uncaught TypeError: Cannot call method 'scale' of undefined nv.d3.js:538

Which goes away when I roll back to the previous commit.

For reference: db9778e

[Bar plus Line] Unlike the other charts, the line + bar is displaying vertical lines even when there is no tick below

Update existing chart with new data

Hi,

I'm using the StackedAreaChart Example code and want to update my data from another webservice.

My update function looks like this

function updateData(url) {
    d3.json(url, function(jsondata) {
        d3.select('#trendItemArea svg')
          .datum(jsondata)
          .transition().duration(500)
          .call(weeklyAreaChart); 
    });
}

Option buttons don't work anymore

The options buttons to select expanded, stacked, stream and items select/deselect buttons don't work after this update.

No Data Available

Sometimes the new data is missing one item which was available, which causes nvd3 to draw the "no data available" label, even it draws the rest correctly.

• Project
• Javascript Source

thanks,
Muki

Tooltips break if lines match

Using the line chart, if two lines exactly match (presumably for at least two vertices), tooltips for the whole chart break.

The error is in d3.geom.voronoi; you get an invalid polygon, probably because it can't do anything with two duplicate points.

Axis font-size?

I would like to blow up the font-size for the LineChart x and y axes.
What is the correct method?

Do I need to adjust both the axis.tickPadding() and the font-size using CSS? Or is there a way to have the chart canvas adjust itself depending on the outer elements' size? It would be nice to have some sort of theme presets, for example "Presentation mode" which scaled up all fonts and made other valuable adjustments.

Thanks.

Legend text seriesWidths error

I get problems with long legend text. I don't see the same problem in the livecode view on NVD3 org.

Tried to look at the legend.js file

 if (align) {
        var seriesWidths = [];
        series.each(function(d,i) {
              seriesWidths.push(d3.select(this).select('text').node().getComputedTextLength() + 28); // 28 is ~ the width of the circle plus some padding
            });

        nv.log('Series Widths: ', JSON.stringify(seriesWidths));

        var seriesPerRow = 0;
        var legendWidth = 0;
        var columnWidths = [];

        while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {
          columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];
          legendWidth += seriesWidths[seriesPerRow++];
        }
}

I cannot figure what's wrong. Got stock css file and json objects are copied from NVD3.org.

Error: Invalid value for <rect> attribute y="NaN", height="NaN"

On MultiBar, in a case y is undefined or null, following errors would be fired.

Error: Invalid value for attribute y="NaN"
Error: Invalid value for attribute height="NaN"

Related (but missing) issue #281: "bars on multibar and discretebar now are 1 px high even if they are 0"

See also: cf9bb41

[All] set/get/subscribe state for all charts

We need the ability to get/set a "state" object for all charts. The state should be a dummy object (i.e. do not include any functions) so that it can be serialized easily using JSON or a URL hash.

The "set" method should be robust enough to handle scenarios where the series data might have changed. For example, if we hide the "A" series, retrieve the state, and then set it back again on a chart that doesn't have just "B" and "C" series, it should simply smoothly ignore this inconsistency.

These are the states that need to be implemented (from the top of my head... might be more):

1. Show/hide series
2. Y axis on cumulative chart
3. Stacked/stream states on stacked chart
   Optionally:
   a. "Activated" tooltips

The tree's state is not required at the moment.

Also, we should have the ability to subscribe to change events. I guess d3.dispatch would be fine.

Y Axis rendered off the canvas

I am trying to use nvd3's lineChart model and I notice that the y axis label is getting rendered off the screen. The following code (this is pretty much the code from the sample page):

var chart = nv.models.lineChart();

chart.xAxis
    .axisLabel('Time (ms)')
    .tickFormat(d3.format(',r'));

chart.yAxis
    .axisLabel('Voltage (v)')
    .tickFormat(d3.format('.02f'));

d3.select('#chart svg')
    .datum(data())
  .transition().duration(500)
    .call(chart);

Generates a text element with the following values:

<text class="nv-axislabel"
      text-anchor="middle"
      transform="rotate(-90)"
      y="-63"
      x="-160">
Voltage (v)
</text>

I simply made the following change to src/models/axis.js:

diff --git a/src/models/axis.js b/src/models/axis.js
index 123cfbb..80db73e 100644
--- a/src/models/axis.js
+++ b/src/models/axis.js
@@ -210,7 +210,7 @@ nv.models.axis = function() {
           axisLabel.enter().append('text').attr('class', 'nv-axislabel')
               .attr('text-anchor', rotateYLabel ? 'middle' : 'end')
               .attr('transform', rotateYLabel ? 'rotate(-90)' : '')
-              .attr('y', rotateYLabel ? (-Math.max(margin.left,width) + 12) : -10); //TO
+              .attr('y', rotateYLabel ? (-Math.max(margin.left,width) + 25) : -10); //TO
           axisLabel
               .attr('x', rotateYLabel ? (-scale.range()[0] / 2) : -axis.tickPadding());
           if (showMaxMin) {

Which generates the following svg:

<text class="nv-axislabel"
      text-anchor="middle"
      transform="rotate(-90)"
      y="-50"
      x="-160">
Voltage (v)
</text>

I don't really know if this is the correct solution or if it breaks other graphs. I am not super familiar with d3.js or nvd3.js. Let me know if you need more information. Thanks!

Swimlane Chart

It would be great if a Swimlane/Timeline style chart could be added to nvd3.

The following d3 examples are a pretty great:

• http://bl.ocks.org/1962173
• http://bl.ocks.org/2338034

Min max axis not aligned

Hi,

I have multiple graphs each of a different type: lines, bars, areas... The X values are not the same on every graph, but their width is. I only with to display the min and max axis and I use the appropriate showMaxMin function.

This works like a charm, but the max axis text are not aligned from one chart to another.

[Stacked Bar Chart] Negative values break the chart

To reproduce:

1. Open Stacked Bar Chart live sample but change the following line in the data window:

function stream_index(d, i) {
  return {x: i, y: -Math.max(0, d)};
}

2. And then click "stacked".

Stacked Bar chart should handle any combination of negative and positive values.

The following image illustrates how the bars should be stacked when mixing negative and positive values:
http://www.infragistics.com/uploadedImages/Content/Products/ASPNET/Whats_new/PositiveNegativeStackChartWeb.png

Provide hook for interecepting errors in setTimeout in render

I am working on a jsbin-like project making an in browser code-editor for putting together svg charts.

Bringing in nvd3 seemed like a no brainer and is so far working great.

One issue though comes from this bit of code

As you can see the actual rendering is done outside of the event loop on which the charting plugin is triggered. This makes sense in the general case but for me it means that I cannot effectively intercept errors and display them to the user.

Can you provide a hook for setting a method to wrap this?

Problem when selecting/unselecting a series on lineChart

I have done a sample of the problem: Full screen result and Issue sample code.

This sample is using my fork (because it has the last version of my pull-request).

Now when I try to select or deselect any series it throws a strange exception. This exception does not happen on the most recent version of your code @bobmonteverde . I was not able to identify the cause, can you help me perfect my last pull-request?

Take a look on the same sample using nvd3 master: Full screen result and Issue sample code

How to get rid of grid lines?

Not really an issue, but lacking a forum, irc, email, faq, or wiki got to ask here - how on earth do you get rid of the grid lines behind the charts?

I can't even find where in the code they're coming from.

sparklinePlus currentValue null-bug

https://github.com/novus/nvd3/blob/master/src/models/sparklinePlus.js

in function: nv.models.sparklinePlus
line 37: var currentValue = sparkline.y()(data[data.length-1], data.length-1);
unsafe access to userInput variable 'data'
check of data-existance verify only at line 46:
if (!data || !data.length) {...

exception as result.

please consider to change order of this two operations.
thank you.

CSS colors

Hi,

I removed most inline CSS and added a nv-color- i class to the legend, the tool tips and the lines / bars / areas. My changes work, but are quite messy.

Are you going to release any similar feature to remove CSS from JS files ?

[Horizontal Multi-Bar Chart] Ability to set the color not just by series but by group also

Currently we can set the color by series, but also need the ability to set the color by group.

How to disable Legend "on click" interaction / behaviour

How to disable legend "onClick" toggle behavior for NVD3 charts?