I have set up a sample codepen to showcase my problem. The issue at hand is that even though the axis labels are being successfully generated and added to the DOM, they are not visible as they are drawn outside of the chart area.
Below is the CSS I am using:
.promo {
fill: rgba(255,0,0,0.5);
}
.price {
fill: $brand-primary;
}
.chart {
height: 50vh;
width: 100%;
overflow: hidden;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
And this is the JavaScript code in use:
let height = $('.chart').height();
let width = $('.chart').width();
let chart = d3.select('.chart')
.append("div")
.classed("svg-container", true) //container class for responsiveness
.append("svg")
.attr('preserveAspectRatio','xMinYMax meet')
.attr('viewBox','0 0 '+width +' '+height )
.classed("svg-content-responsive", true)
.append('g');
// rest of the JS code follows...
The solutions I've found so far suggest adjusting margins for charts with fixed pixel sizes. However, since my chart is responsive (100% width and 50% viewport height), this approach isn't feasible. How can I resolve this issue to ensure my labels are displayed correctly?