nvd3.js

Is there a way to color specific bars? If a bar is less than the line, color it red. Code: https://github.com/tvinci/webs/blob/gh-pages/lineplusbar.html Example: http://tvinci.github.io/webs/lineplusbar.html I'd like to do something like this but the value for i is not the y value that I send in. It has been modified: d3.selectAll("rect.nv-bar") .style("fill", function(d, i){ return i > 50 ? "red":"blue"; }); Data: var overview_data=[ { "key" : "Achieved", "bar": true, "values" : [ [ "1x" , 30] , [ "2x" , 70] , [ "3x" , 200] ] }, { "key" : "Required", "values" : [ [ "1x" , 50] , [ "2x" , 100]

I have data that has long labels, i.e: values: [ { x : "This is a really looong label", y : 40 }, { x : "Short label", y : 30 } ] and only a small portion of the text is shown and the rest is hidden Here is a jsfiddle to demonstrate the issue. Ideally I would like to set a custom width for the labels and/or make them able to use multiple lines if they overflow. Is this possible? Martin Peschke Why not just add margins? var chart = nv.models.multiBarHorizontalChart() .margin({top: 30, right: 20, bottom: 50, left: 175}); Eric S. Bullington What you're wanting to do is likely beyond the

I am using NVD3 scatter/ Bubble chart. This is a continuation from the question here . I am plotting the log base 2 values for the y axis. But I want the y axis to have the original values as labels corresponding to the log base 2 scale. I am unable to understand how to do so. Edit This is what I have for plotting data[i].values.push({ x: random() , y: log2(yValue) , size: Math.random() }); function log2(val) { console.log("val = " + val + " : " + Math.log(val) / Math.LN2) return Math.log(val) / Math.LN2; } Now, the y axis ticks have the log2 values. I want to change the y axis ticks to have

I am using NVD3.js library to generate graph. I tried adding line chart into it & getting the above error. How to resolve it? I am trying this here Can you post a Plunker/Fiddle? Off the top of my head, it may just be where you're including the nv.d3.js. Did you also include D3.js? Actually i found out, the problem was the folder structure. The examples that comes with the angular-nvd3 website gives path bower_components/nvd3/nv.d3.js , check in your bower_components file the actual path would be bower_components/nvd3/ build /nv.d3.js Similarly the nv.d3.css path is NOT bower_components/nvd3

I'm usinging v1.7.1 of nvd3. I have a page in which I render rows of charts with the same configuration but different data. I'm using interactive tooltip option on the multi line chart. The tooltip is rendering correctly, but as you scroll down the page, when you rollover the line, the tooltip is being rendered in the same position at the top of the page. It appears that the first few rows render the tooltip in the appropriate position but as you scroll down the tooltip goes out of view. I've tried manipulating the position with the tooltipContent (which seems to be the api available), but

While displaying nvd3 chart with Ajax requests, the charts are getting wired up. So I thought the problem is occurring due to asynchronous call delays (may be the chart is displaying before the full data is loaded, etc). So I have used promises, but still I am getting the same problem. Please see the plunker http://plnkr.co/edit/AcIpmki7GNvcoT6Z38Pm?p=preview . If you change the date range slider, the main chart won't display properly. I am not sure where the problem is? After searching some of the posts in forum, I have come across some thing like gaps in the time series, is it due to that?

I am trying to read in data from csv file and want to visualise this data with a scatterChart in NVD3. I would have linked to a JSfiddle or something similar but I don't know how to include a csv file in these online JavaScript IDEs. Is that possible? The csv file has the following format: country,y,x Algeria,91.8,15.7 Bahrain,98.2,49.3 Jordan,99.1,55.0 Kuwait,98.6,57.4 Lebanon,98.7,58.6 My best guess for the code to read the csv file with is: var scatterdata = [ { key : "Group1", values : []//{x:"",y:""} } ]; d3.csv("literacyScatterCountrynames.csv", function (error, csv) { if (error) return

I have been attempting to create a Shiny timeseries plot using NVD3 library. Am relatively new to R, Shiny and NVD3. The problem is that when I run the ShinyApp, no chart renders on the browser. Using chromes developer tools, I can see that the div for myChart is created and populated with data, but not understanding why I cannot see the chart itself. Would appreciate any and all help on this matter... My code is like so: #ui.R require(rCharts) shinyUI(pageWithSidebar( headerPanel("Population Trend By Age Group:"), sidebarPanel( selectInput(inputId = "agegrp", label = "Choose Agegroup",