CODEWITHSUNDEEP
chartstitlec3.js
smart987
smart987

Reputation: 832

How can I add a title to c3.js chart

Can any one suggest me the way of adding title to the C3.js line and bar charts ? I have got the following sample but it is for gauge chart. For any c3 chart is there any option to set the chart title? 

donut: {
  title: 'Title'
}

Upvotes: 18

Views: 18633

Answers (4)

Muthamil
Muthamil

Reputation: 69

I am using this code for my chart.

Code:

var chart = c3.generate({
        data: {
            columns: [
                ['Monday', 70],
                ['TuesDay', 20],
                ['Wednesday', 30],
                ['Thursday', 50],
                ['Friday', 100]
            ],
            type: 'donut'
        },
        donut: {
            title: "usage "
        }
    });

Result :

Result of my code

Upvotes: 5

dbone
dbone

Reputation: 551

This was a top google result, so I thought I'd add that this is now part of the library:

title: {
  text: 'My Title'
}

More info @ https://github.com/masayuki0812/c3/pull/1025

Upvotes: 55

Caner
Caner

Reputation: 1498

also couldn't find a way and ended up writing the title as the unit and editing the label.

gauge: {
        label: {
            format: function(value, ratio) {
                return "%"+value;
            },
            show: true // to turn off the min/max labels.
        },
    min: 0, 
    max: 100, 
    units: "Overall Profit"
//    width: 39 // for adjusting arc thickness
    },

Upvotes: 3

Sean
Sean

Reputation: 15169

You'd need to fall back to using D3 to add a chart title. Something like:

d3.select("svg").append("text")
    .attr("x", 100 )
    .attr("y", 50)
    .style("text-anchor", "middle")
    .text("Your chart title goes here");

Upvotes: 9

Related Questions