score:0

Accepted answer

If anyone stumbles on this question in the future: I decided to place my title below the chart and managed to solve it by slightly cheating.

I used the following CSS:

.svg-container {
    height:100%;
    width:100%;
    min-height: 100%;
    position:relative;
}

.svg-content-responsive {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    width: 100%;
    position: relative;
    padding-bottom: 50px;
}

.svg-gauge-title-container {
    width: 100%;
    height: 50px;
    position:relative;
    margin-top:-50px;

}

.svg-gauge-title {
    position: relative;
    width: 100%;
}

i.e. I added 50px of padding-bottom to the chart, and also added a title container with 50px of margin above. Might not be the cleanest way, but it works.

score:1

Is there something wrong with adding something like this:

var title = svg.append("text") 
    .text('This is the title') 
    .attr("text-anchor", "middle") 
    .style("font-size", '12px') 
    .attr("dy", 10)
    .attr("dx", width / 2);

exactly like the text?

PS: adding your approaches that failed would help people answer the question


Related Query

More Query from same tag