C3: Custom legend item tile size & legend item padding

[davidpoore]

For some of our chart designs, we want to have legend element tiles that were lines rather than boxes - i.e. legend element tiles that look like this:

Also we want to be able to control the amount of space in between each legend element for more fine-grained control over how it is displayed.

So I want to add custom config options for these:

legend: {
    // amount of padding to put between each legend element
    padding: 5,
    // define custom height and width for the legend item tile
    item: {
        tile: {
            width: 15,
            height: 2
        }
    }
}

The default values for width and height would be the current legend item size.

[michaelrodov]

pull request filed
closing

[jerrylow]

Note this needs to be added to the documentation.

[fabiofcferreira]

I've been searching for ways to customize tiles, e.g. (adding styles using ::after or ::before) and I found this.
I think this should be added to the docs as soon as possible.

Thanks for this awesome library. 😄

[taliffsss]

how can i manipulate legend text like i want to split a text. how could i do that thanks and advance

[fabiofcferreira]

@taliffsss I guess you could use CSS for that but to be honest, if you can, use D3 as it is the base for C3.js.

[mvidailhet]

This useful configuration is not in the doc yet. That's too bad! I just found it thanks to Google.

[rogeriolino]

Item padding isn't working when legend is 'inset':

Inset
https://jsfiddle.net/rogeriolino/by8vwsa5/

Default
https://jsfiddle.net/rogeriolino/by8vwsa5/4/