nvd3.js

I'm using a fairly simple example of nvd3 line with focus chart. myData returns a JSON object from my php file of which the x-cordinates are numbers from 0-23. I would like to know how to format the x-axis in hours format. d3.json('get_data.php', function (error, myData) { // Renders a line chart (function () { nv.addGraph(function () { var chart = nv.models.lineWithFocusChart(); chart.xAxis .tickFormat(d3.format('')); chart.yAxis .tickFormat(d3.format('')); chart.y2Axis .tickFormat(d3.format('')); d3.select("#chart svg") .datum(myData) .transition().duration(500) .call(chart); //Define

This is ugly : I need something that is not ugly. Time series are very usual, but I not see how to build a "plug and play" chart with ISO dates. Perhaps an equivalent question is "How to use d3-scalelinear/Non-numeric range/Date with NVD3?" (or d3-scaletime ) Notes This is the main code: nv.addGraph(function () { var chart = nv.models.discreteBarChart() //.x( d=> d.label ) // very Ugly! .x( d=> { let dd = new Date(d.label); return d3.time.format('%b %d')(dd) }) // Ugly, because need to jump some days before show next .y( d=> d.value ) .staggerLabels(true) // not solved d3.select('#chart svg')

For the following slidify deck, --- title : Foo framework : revealjs # {io2012, html5slides, shower, dzslides, ...} revealjs : {theme: solarized} highlighter : highlight.js # {highlight.js, prettify, highlight} hitheme : tomorrow # widgets : [] # {mathjax, quiz, bootstrap} mode : selfcontained # {standalone, draft} ext_widgets : [libraries/nvd3] --- ## NVD3 Plot Iframe ```{r nvd3plot2, results = 'asis', comment = NA, message = F, echo = F} require(rCharts) n1 <- nPlot(mpg ~ wt, data = mtcars, type = 'scatterChart') n1 ``` I want to set the background color of the chart to white. I can do this

I have the same problem as with this user: Angular nvD3 Error: Invalid isolate scope definition for directive nvd3 The answer there said "use the latest angularjs" beyond Angular 1.1.4....but I am using the latest AngularJS!! AngularJS v1.6.7 What could I be doing wrong? Works with this setup <link rel="stylesheet" href="//unpkg.com/nvd3/build/nv.d3.css"/> <script src="//unpkg.com/angular/angular.js"></script> <script src="//unpkg.com/d3@3/d3.js" charset="utf-8"></script> <script src="//unpkg.com/nvd3/build/nv.d3.js"></script> <script src="//unpkg.com/angular-nvd3/dist/angular-nvd3.js"><

I am trying to have my own y axis labels for the bubble chart in nvd3. Currently the labels are [1,2,3,4,5]. I want them to be displayed as [2,4,8,16,32]. I found the following function, chart.yAxis.tickValues(['2','4','8','16','32']); But the labels are not being changed here . I am unable to understand why. These tick values will not have any effect if the y values themselves are not within the 2-32 range. Right now that chart only has y values up to 2+. So, if in addition to adding chart.yAxis.tickValues(['2','4','8','16','32']); to the Chart Code/Javascript tab as you have in your question