My current bar graph displays values for A, B, and C that fluctuate slightly in the data but follow a consistent trend, all being out of 100.
https://i.stack.imgur.com/V8AWQ.png
I'm facing issues adding lines with text to the center of each graph. Attempts at appending a path have been unsuccessful so far.
Another challenge is creating striped white lines across the entire bar while maintaining visibility underneath. The solution here doesn't alter the bars as needed. Would layering another bar with line gradient achieve this effect?
https://i.stack.imgur.com/1fgl0.png
var A = 89;
var B = 6;
var C = 5;
var A = parseInt(A);
var B = parseInt(B);
var C = parseInt(C);
var margin = {
top: 60,
right: 70,
bottom: 40,
left: 65
}
var width = '100%';
var data = [{
"Percentage": (A + B + C),
"Name": "A"
}, {
"Percentage": (B + C),
"Name": "B"
}, {
"Percentage": C,
"Name": "C"
}];
var data1 = [A, B, C];
var chart = d3.select("#ChartAreaDiv").append("svg")
.attr("class", "chart")
.attr("width", width)
.attr("height", 200 - margin.top - margin.bottom)
var x = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {
return d.Percentage;
})])
.range([0, width]);
var x1 = d3.scaleLinear()
.domain([0, d3.max(data1, function(d) {
return d.Percentage;
})])
.range([0, width]);
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("width", function(d) {
return x(d.Percentage);
})
.attr("height", 30)
.attr("rx", 4)
.attr("ry", 4);
chart.selectAll("text")
.data(data)
.enter().append("text")
.attr("x", function(d) {
return x(d.Percentage);
})
.attr("y", 15)
.attr("dx", -10)
.attr("dy", ".42em")
.attr("text-anchor", "middle")
.style("font-weight", "bold")
.data(data1)
.text(String);
chart.append("path")
.data(data)
.enter().append("path")
.attr("stroke-width", 2)
.style("stroke", "grey")
.attr("x1", function(d) {
return x(d.Percentage)/2;
})
.attr("x1", function(d) {
return x(d.Percentage)/2;
})
.attr('y1', 30)
.attr('y2', 50);