CODEWITHSUNDEEP
rstudioc3.jsgauge
Joonhyuk James Heo
Joonhyuk James Heo

Reputation: 109

How to add a title to C3 Gauge Chart?

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

      }
    };
  }
});

Upvotes: 1

Views: 1046

Answers (1)

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8217

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.

Upvotes: 2

Related Questions