i think you are running into this issue: elasticx for linear domain doesn't include the rightmost bar
(or a similar issue.)
dc.js takes its boundaries very literally, and it also computes them literally, so much that it doesn't take the width of its own bars into consideration.
one simple way to work around this is to add some padding:
since you are aggregating by month, this will make sure there is always a month to the left and right of the calculated domain (which will be of width 0 when there is only one bar).
so you might want to calculate the domain manually, in
preredraw, until dc.js gets better at this.
fork of your fiddle: https://jsfiddle.net/gordonwoodhull/97h8kd5g/2/
- dc.js Stacked Bar Chart having only one column and with elastic X Axis is not rendered properly
- X axis label not displayed in bar chart with scroll and zoom feature - d3js, Brushing
- How do I use event listeners to swtich my d3 bar chart where I only see one and not both?
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- d3.js stacked bar chart with positive and negative values
- NVD3.js: Stacked and grouped bar chart with two y-axis
- How to line up x axis on stacked bar chart with a line overlay in d3.js
- d3 bar chart with fixed bar width and fixed spacing to align in center axis line
- D3.js bar chart - axis and labels not working / transitioning
- D3 Bar and Linear Chart With Multiple Axis
- D3 bar chart not working properly with all negative and positive values
- D3 v6: How to zoom stacked bar by selected segment to stretch only selected segment and shrink rest segments (and keep initial chart width)?
- d3 bar chart with custom x axis and bar width
- Using d3-tip and CSS hover effect with d3 stacked bar chart
- NVD3 Line Plus Bar With Focus Chart only displaying half width of first and last bar
- Stacked column chart with a line in one graph using d3.js
- d3.js Stacked Bar Chart working for one dataset but not the other
- dc.js - Chart not rendering (single row bar chart - horizontal row), with the exception of legend, axes and tick marks/values (which do render)
- Stacked bar chart not showing and no errors in console log either
- How to create a d3 stacked bar chart that only iterates through columns 1 and 2 of data file?
- Horizontal Stacked Bar Chart with Two Y Axis Issues
- D3 Line Chart not having proper X & Y axis plotting with Labels
- How can I create a basic bar chart with unique counts on the y axis and a category on the x axis?
- d3.js horizontal stacked bar chart with 2 vertical axes and tooltips
- How can I make a bar chart starting from the 0 point of the y axis and not from the bottom of the svg?
- Right Axis not displaying on Dual Axis Grouped Bar and Line Chart D3
- D3 stacked bar chart not able to see full x axis lables
- Issues with x and y axis of a bar chart with d3
- D3 stacked bar chart g and rect not showing
- Logarithmic bar chart in d3 with only one order of magnitude
More Query from same tag
- Shiny app not Rendering a Dimple.js Population Pyramid
- D3.js hierarchical edge bundling coloring by group
- Updating text link URL in d3
- How to get started with d3js examples using xampp?
- Marimekko Chart: x axis ticks with irregular column width
- How to omit a data range with no filtering
- d3js: Dynamically updating node objects
- Transition on labels in d3 pie/donut chart
- About zooming in D3 radial tree
- Display D3 graph with ember
- Importing d3.js in angular 2 project not working
- How do I perform append after DOM elements updatein a D3 chart?
- Bootstrap popover on svg element repositions itself incorrectly when page is scrolled
- Applying gravity to a bounded d3.js force layout
- Why is initial drag position incorrect when using a scale?
- React.js + D3.js - Nodes overlap each other
- D3 Sankey Diagram: Adding New Node and Link with Transition
- typescript import function from 3rd party declare module
- exit().remove() doesn't remove node when it goes out of view
- A function in d3.js to create start and end nodes and node and link texts from a JSON source of varying size
- Mouseover on one chart affecting the other chart(s) d3.js
- D3.js .selectAll not working
- Resetting D3s transform attributes
- Creating a variable thickness line in d3.js
- NetworkD3 Sankey diagram in R: How to calculate value for each link?
- Sankey-diagram PowerBI custom visual with color nodes and ordering
- Chart gets clipped when setting height and width
- d3.js:vertical moving line's intersection point with line graph
- D3 Display Text from API Call