score:1
Accepted answer
You're setting 5 different data series (Subject 1-5) so it is reserving space at each value of 'indicator' (data 1-5) along the x-axis for 5 bars, but you are only setting a value for one series per data point in your data.
{ 'indicator': 'data1', 'Subject1': 100 },
{ 'indicator': 'data2', 'Subject2': 90 },
{ 'indicator': 'data3', 'Subject3': 66 },
{ 'indicator': 'data4', 'Subject4': 50 },
{ 'indicator': 'data5', 'Subject5': 50 },
I suspect Subject should be one series, so try this where there is only one data series Subject, and the bars then fit half the width at each 'indicator' value along the x-axis.
{ 'indicator': 'data1', 'Subject': 100 },
{ 'indicator': 'data2', 'Subject': 90 },
{ 'indicator': 'data3', 'Subject': 66 },
{ 'indicator': 'data4', 'Subject': 50 },
{ 'indicator': 'data5', 'Subject': 50 },
keys: {
x: 'indicator',
value: ['Subject']
}
http://jsfiddle.net/68pgvsbh/5/
Your alternative if you do want to keep the different named Subject series for some reason is to add them as a stacked group
groups: [["Subject1", "Subject2", "Subject3", "Subject4", "Subject5"]],
Source: stackoverflow.com
Related Query
- C3 bar chart width is not working properly
- d3.js Bar Chart transitions not working properly
- D3 bar chart not working properly with all negative and positive values
- Slice and bounce effect not working properly in pie chart
- D3.js bar chart - axis and labels not working / transitioning
- Horizontal bar chart exit method not working
- d3 Bar chart with a tool tip is not working
- D3js responsive stacked bar chart - other topics solutions not working
- D3 bar chart bar text labels not visible properly
- viewbox with pixel value to make d3 chart resposive is not working properly
- Exit() is not working for d3 group bar chart
- D3 bar chart does not dynamically update y-axis and x-axis properly
- Browser tooltip not working in d3.js bar chart
- d3.js Stacked Bar Chart working for one dataset but not the other
- How to make d3 bar chart bins' width resize properly on update?
- Pie chart interpolate not working properly
- Sortable Bar Chart Not Working
- d3 grouped bar chart update pattern not working
- d3.js (v3) enter() not working in bar chart update
- x position of tooltip in d3 stacked bar chart not working
- d3.js group bar chart not working
- Sorting bar chart in D3 not working
- dc.js Stacked Bar Chart having only one column and with elastic X Axis is not rendered properly
- D3 bar chart sorting not working
- d3 js bar chart not working in mozilla firefox
- D3 Dashboard chart not working properly
- Group bar chart data not working as expected
- d3 bar chart exit not quite working
- Javascript d3 bar chart not working
- NVD3 stacked bar chart option not working
More Query from same tag
- Filter CSV rows to return a chart
- How to blur an image on mouseover using D3?
- D3: pie labels with "horizontal ending"-lines without overlapping
- Multiple networks in 1 graph from networkD3's forceNetwork
- d3js: Add quantitative dimension to Hierarchical Edge Bundling
- d3.js Update circle on line chart
- d3.js: Dual lines of text for each tick on an axis?
- Reset Button for NVD3 Parallel Coordinate Plot
- Dimple js modify scatter shape
- How to use drag as a 'function' instead of a 'var'?
- How to tell d3js that this half donut chart should fill values from left to right corner
- How can we load a CSV file into JupyterLab using d3?
- D3.js - .on(mouseover) not retrieving data (force-directed-layout over a map(leaflet.js))
- d3js make zoom work on line chart
- d3js charts and graphs: a multichoice list
- Dynamically updating datamaps fill color not working using variable as country key
- Change Size of Tick Labels D3
- Clipping of overflowing div inside foreignObject during translate in Firefox
- React Native ART and D3: how to make the corners of d3.path rounded?
- Adding new axis to Parallel Coordinates visualization in d3.js
- Inserting new line in .html() using D3
- Using plugins for d3 in angular2
- D3 force-directed graph adding new nodes causes x & y to be NaN
- modifying d3's force layout "annealling" schedule
- d3.js download graph as svg image
- Bootstrap popover on svg element repositions itself incorrectly when page is scrolled
- How do I control the bounce entry of a Force Directed Graph in D3?
- How to render a bar chart based on a selection from dropdown menu?
- Empty elements created, d3.js
- Dynamic Graph Visualisation Using JS