nvd3.js

I am trying to use NVD3 http://nvd3.org/livecode/#codemirrorNav a pie chart. But i want to change the default color. How do i change the color. i am not able to do it. To use your own colours you will have to override the existing colours, I prefer not to tinker around with the original code. So this is what I did. var myColors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]; d3.scale.myColors = function() { return d3.scale.ordinal().range(myColors); }; nv.addGraph(function() { var chart = nv.models.pieChart() .x(function(d) {

I want to add a title text over the graph in NVD3.js. I tried the following, nv.addGraph(function() { var chart = nv.models.linePlusBarWithFocusChart() .margin({top: 30, right: 60, bottom: 50, left: 70}) .x(function(d,i) { return i }) .color(d3.scale.category10().range()); chart.append("text") .attr("x", 200) .attr("y", 100) .attr("text-anchor", "middle") .text("Sample Charts"); } Its (Highlighted) working for D3.js but not working for NVD3.js. I'm getting a Blank page.. I want to place the text over the Chart as like the following image (Which is created in Paint) How can I achieve this? You

I'm trying to set the y-axis range of the chart from 1-100. Consulted the API documentation and found a possible solution with axis.tickValues as seen here https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues However, using the option does not work. Reading further down on the documentation page linked above under axis.tickSize, the following line was spotted The end ticks are determined by the associated scale's domain extent, and are part of the generated path domain rather than a tick line So I take it setting the min and max of the range can't be done through the Axis option. Any

How can I make the date format in nvd3.js. For example: data1 = [{ "values": [{ "x": 1374561814000, "y": 2 }], "key": "x-axis" }] 1374561814000 what does it mean, how its converted from a date? The date 1374561814000 is currently Unix Time Stamp. You can define how you want the date to be displayed in your when passed into your chart. Have a read on the d3 guide to Time formatting it will give you a better understanding. chart.xAxis.tickFormat(function(d) { // Will Return the date, as "%m/%d/%Y"(08/06/13) return d3.time.format('%x')(new Date(d)) }); Or you may want to return the date stamp

I am using nvd3.js and trying to add a click event d3.selectAll(".nv-bar").on('click', function () {console.log("test");}); JSFiddle How can I do that ? I was running into the same issue and was about to dump NVD3 all together because of the lack of documentation... What you need to do is add a callback function to addGraph(). Also note the d3.selectAll() instead of d3.select(). Good Luck. nv.addGraph(function() { var chart = nv.models.multiBarHorizontalChart() .x(function(d) { return d.label }) .y(function(d) { return d.value }) .margin({top: 5, right: 5, bottom: 5, left: 5}) .showValues