score:1
Checkout the code below which was derived from your posted code:
nv.addGraph(function() {
var data = [{
"values": [
{
x: new Date("1999-12-01"),
y: 42.27
},
{
x: new Date("2000-12-01"),
y: 41.73
},
{
x: new Date("2001-12-01"),
y: 41.34
},
{
x: new Date("2002-12-01"),
y: 41.84
},
{
x: new Date("2003-12-01"),
y: 43.93
},
{
x: new Date("2004-12-01"),
y: 42.18
},
{
x: new Date("2005-12-01"),
y: 42.31
},
{
x: new Date("2006-12-01"),
y: 43.14
},
{
x: new Date("2007-12-01"),
y: 43.24
},
{
x: new Date("2008-12-01"),
y: 39.30
},
{
x: new Date("2009-12-01"),
y: 43.80
},
{
x: new Date("2010-12-01"),
y: 44.10
},
{
x: new Date("2011-12-01"),
y: 54.10
},
{
x: new Date("2012-12-01"),
y: 62.10
},
{
x: new Date("2013-12-01"),
y: 56.70
},
{
x: new Date("2014-12-01"),
y: 45
},
{
x: new Date("2015-12-01"),
y: 55.60
},
{
x: new Date("2026-12-01"),
y: 54.40
},
{
x: new Date("2027-12-01"),
y: 57
}
],
"bar": true,
"key": "Payout Ratio"
}];
var fDate = data[0].values[0].x,
lDate = new Date(data[0].values[data[0].values.length - 1].x);
lDate.setFullYear(lDate.getFullYear() + 1);
var chart = nv.models.multiBarChart()
.showControls(false)
.reduceXTicks(false)
.rotateLabels(-45),
container = d3.select('#payout_ratio_chart svg'),
availableWidth,
numTicks = (lDate.getFullYear() - fDate.getFullYear()) + 1,
xScale = d3.time.scale();
function updateAvailableWidth() {
availableWidth = (chart.width() || parseInt(container.style('width')) || 960) - chart.margin().left - chart.margin().right;
}
updateAvailableWidth();
xScale.rangeBands = xScale.range;
xScale.rangeBand = function() {
return (1 - chart.groupSpacing()) * availableWidth / numTicks;
};
chart.multibar.xScale(xScale);
chart.xDomain([fDate, lDate]);
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%b %Y')(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',f'));
container.datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(function() {
updateAvailableWidth();
chart.update();
});
return chart;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css" rel="stylesheet"/>
<div id="payout_ratio_chart">
<svg style="width:100%;height:400px" />
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script>
Fixes:
Only difference between your code and fixed code is how fDate
, lDate
and numTicks
are calculated.
fDate
is your start date while lDate
is last date in data for the following year. Lastly, numTicks
is difference between years in fDate
and lDate
.
Find jsfiddle here.
score:0
You have a bar chart so you have to insert data points for not existing dates.
Here I have hard coded but you can write some logic to add missing dates. For some other data serie you can have values for the missing dates of this serie.
nvd3 draws these bars with a minimal height of 1px, so add a style to hide these small bars
.nvd3 .nv-groups rect[height="1"] {
opacity: 0;
}
nv.addGraph(function() {
var data = [{
"values": [
{ x: new Date("1999-12-01"), y: 42.27 },
{ x: new Date("2000-12-01"), y: 41.73 },
{ x: new Date("2001-12-01"), y: 41.34 },
{ x: new Date("2002-12-01"), y: 41.84 },
{ x: new Date("2003-12-01"), y: 43.93 },
{ x: new Date("2004-12-01"), y: 42.18 },
{ x: new Date("2005-12-01"), y: 42.31 },
{ x: new Date("2006-12-01"), y: 43.14 },
{ x: new Date("2007-12-01"), y: 43.24 },
{ x: new Date("2008-12-01"), y: 39.30 },
{ x: new Date("2009-12-01"), y: 43.80 },
{ x: new Date("2010-12-01"), y: 44.10 },
{ x: new Date("2011-12-01"), y: 54.10 },
{ x: new Date("2012-12-01"), y: 62.10 },
{ x: new Date("2013-12-01"), y: 56.70 },
{ x: new Date("2014-12-01"), y: 45 },
{ x: new Date("2015-12-01"), y: 55.60 },
{ x: new Date("2016-12-01"), y: 0 },
{ x: new Date("2017-12-01"), y: 0 },
{ x: new Date("2018-12-01"), y: 0 },
{ x: new Date("2019-12-01"), y: 0 },
{ x: new Date("2020-12-01"), y: 0 },
{ x: new Date("2021-12-01"), y: 0 },
{ x: new Date("2022-12-01"), y: 0 },
{ x: new Date("2023-12-01"), y: 0 },
{ x: new Date("2024-12-01"), y: 0 },
{ x: new Date("2025-12-01"), y: 0 },
{ x: new Date("2026-12-01"), y: 54.40 },
{ x: new Date("2027-12-01"), y: 57 }
],
"bar": true,
"key": "Payout Ratio"
}];
var chart = nv.models.multiBarChart(),
container = d3.select('#payout_ratio_chart svg');
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%b %Y')(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',f'));
chart.showControls(false);
container.datum(data).transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
.nvd3 .nv-groups rect[height="1"] {
opacity: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css" rel="stylesheet"/>
<div id="payout_ratio_chart">
<svg style="width:100%;height:400px" />
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script>
Source: stackoverflow.com
Related Query
- nvd3 multibarchart last bar is hidden not visible
- NVD3 Charts not rendering correctly in hidden tab
- dc.js barChart first and last bar not displaying fully
- D3 bar chart bar text labels not visible properly
- NVD3 Line Plus Bar With Focus Chart only displaying half width of first and last bar
- Angular nvd3 multibarchart stacked not showing properly
- vertical bars not aligned with the x-axis label and last bar rendered outside the x-axis range - D3 js - simple bar with fixed width
- D3 v4 Update Bar Graph Does Not Plot Last Bar
- NVD3 stacked bar chart option not working
- NVD3 stacked bar chart does not show x-axis properly
- NVD3 chart fails to calculate legend text length in Chrome, since Window.getComputedStyle does not return font-size correctly
- D3 Bar Graph example not working locally
- NVD3 force specific width of bar in bar chart
- How to set circle at the right end of the last bar / item using D3
- d3js v4 x-axis-label is there but not visible
- New layout after opening a group not base on the last layout with cola.js
- Basic AngularJS NVD3 Directives will not work and no error
- SVG textPath not visible after transition on Chrome
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
- Trouble using DC.js (crossfilter and d3 convenience library) - bar chart not showing values
- nvd3 displaying large black dots, and not fully rendering
- SVG not drawn outside the visible area of Google Maps
- nvd3 line chart not shown properly. (dots and shaded area)
- C3 chart is not visible in Bootstrap grid layout
- Bell Curve / Normal Disribution Curve On A NVD3 Discrete Bar Chart
- X axis not displaying on bar chart using d3.js
- D3 bar chart not showing first element in array
- tickSizeOuter not equal zero, but just first and last tick of yAxis shows line
- d3 time scale - last bar on graph is appearing outside of the graph
- How to position NVD3 line graph above all other area / bar graphs?
More Query from same tag
- Access more data from flare.json for d3.tree
- Uncaught TypeError: Cannot read property 'dispatchEvent' of null
- path not drawn in d3 stacked area chart
- How to increase the slider length in d3.js
- Why are not all my text labels showing in my Scatterplot?
- Adding 'measures' label to D3 bullet chart
- d3 v4 radio button with sortable bar chart
- d3 pan/zoom with DOM center point is off
- d3 ghosting zoom pan ie
- Nest data containing arrays with d3.nest
- Using array inside JSON in D3 Graph
- Typescript expects undefined to be returned from helper function in d3.nest().rollup()
- Stacking multiple line graphs in d3js without nesting data
- SVG is invisible but exists in DOM
- Restrict Panning of d3.js chart to One Direction
- D3.js advanced node connections (find the path)
- d3 selectAll vs jQuery selector
- How to add charts to a React.js app without using a totally different coding style?
- How to add a legend and labels to the pie chart?
- D3 Modify Path's y
- D3, update plotted data upon zoom/pan
- Change rectangle color using if else for a Power BI Custom Visual
- How to avoid dot collapsing on scatter plot d3.js
- AngularJS directive not updating D3 circle pack chart
- Send POST request in d3 (with d3-fetch)
- Loading data once but is it good practice to have a global variable "var data;"
- how to create co-ordinates in svg for d3 js map
- cant access like `d3.svg(), d3.scale()` and some others properties in d3js with angular2
- Is it possible to change the x scale of a rowchart to sqrt?
- d3v4 timeline adding a date axis to the bottom?