How to add a title to C3 Gauge Chart? - rstudio

Question

I am using RStudio to deal with C3 Gauge Chart. Since I am not much informed about javascript. I am having a trouble to do some small things such as adding a title.
I would like to add a title on it. However, I am having a trouble with it. Please help! Here is the code below.
output$gauge1 <- renderC3Gauge({
PTable <- Projects
if (input$accountname != "All") {
Projects <- Projects[Projects$AccountName == input$accountname,]
}
if (input$sponsorname != "All") {
Projects <- Projects[Projects$SponsorName == input$sponsorname,]
}
if (input$typename != "All") {
Projects <- Projects[Projects$TypeName == input$typename,]
}
Projects
C3Gauge(mean(Projects$PercentComplete))
})
}
shinyApp(ui=ui,server=server)
--------------------------------------------------------
HTMLWidgets.widget({
name: 'C3Gauge',
type: 'output',
factory: function(el, width, height) {
// TODO: define shared variables for this instance
return {
renderValue: function(x) {
// create a chart and set options
// note that via the c3.js API we bind the chart to the element with id equal to chart1
var chart = c3.generate({
bindto: el,
data: {
json: x,
type: 'gauge',
},
gauge: {
label:{
//returning here the value and not the ratio
format: function(value, ratio){ return value;}
},
min: 0,
max: 100,
width: 15,
units: 'value' //this is only the text for the label
}
});
},
resize: function(width, height) {
// TODO: code to re-render the widget with a new size
}
};
}
});

Answer 1

By deafult C3.js cannot add title to gauge chart, but you can do it with D3.js, which C3 is based on.
You have to add oninit callback into param object:
var chart = c3.generate({
oninit: function()
{
d3
.select(el)
.select("svg")
.append("text")
.attr("x", "50%" )
.attr("y", "100%")
.style("text-anchor", "middle")
.text("Your chart title goes here");
},
gauge chart title example.