var legend = new c3.Legend();
legend.render({Create a very simple example legend demonstrating the default accessors. This data set is an array of strings which are displayed as legend items. Elements which are arrays themselves are treated as nested items.
var legend = new c3.Legend();
legend.render({Dynamically add elements to the DOM
anchor: $('<div></div>').css('display', 'inline-block').appendTo($('#legend_examples'))[0],
data: [
"Apples",
"Oranges",
['foo', 'bar'],
"Really long item name",
"Spam"
],
width: 150,
});This example legend uses user-defined objects for the data elements and defines
an item_options.text accessor function to describe how to display the items.
It also defines a custom nest callback to describe how to get arrays of nested items.
var legend2 = new c3.Legend<{ name: string, types: string[] }, string>({
anchor: $('<div></div>').css('display', 'inline-block').appendTo($('#legend_examples'))[0],
width: 150,
data: [
{
name: "Fruit",
types: ["Apples", "Oranges"],
}, {
name: "Minerals",
types: ["Gold", "Sulfur"],
},
],
nest: (d) => d.types,
item_options: { text: (d) => d.name },
nested_item_options: { text: (d) => d },
bullet_options: false,
});
legend2.render();This example uses an item_option accessor to define each data item to directly
specify it’s own options object.
var legend3 = new c3.Legend<{ options: c3.Selection.Options<any> }, void>({
anchor: $('<div></div>').css('display', 'inline-block').appendTo($('#legend_examples'))[0],
width: 150,
data: [
{
options: {
text: "Red",
styles: { color: 'red' },
},
},
{
options: {
text: "Blue",
styles: { color: 'skyblue' },
},
},
],
item_option: (item) => item.options,
}).render();A function to generate random data series for the line graphs that jiggle but stay in bounds.
function generate_random_legend_data() {
var seed = 5 + Math.random() * 5;
var data = [];
for (let i = 0; i < 100; i++) {
seed += Math.random() - 0.5
if (seed < 0) seed = Math.random()
else if (seed > 10) seed = 10 - Math.random()
data.push(seed);
}
return data;
}Generate random bar chart data
var bar_data = [];
for (let i = 0; i < 100; i += 4)
bar_data.push([Math.random() * 2, Math.random() * 2, Math.random() * 2]);Create a chart with various layers for demonstration purposes.
We will then link a plot_legend to this chart.
Notice how the name properties of each layer and stack is used in the legend.
var plot = new c3.Plot();
var bar_layer: c3.Plot.Layer.Bar<number>;
plot.render({
anchor: $('<div></div>').appendTo($('#plot_legend_example'))[0],
anchor_styles: { 'display': 'inline-block' },
height: 300,
width: '80%',This chart will treat the value of data elements as the Y value and the index of the element as the X value.
h: d3.scale.linear().domain([0, 100]),
v: d3.scale.linear().domain([0, 10]),
x: (d, i) => i,
y: (d) => d,Add a horizontal axis with grid lines.
axes: [
new c3.Axis.X({
grid: true,
}),
],
layers: [Add a stacked bar- chart layer with 3 stacks. For more explanation on how to use these layer types please see the stacked charts examples.
bar_layer = new c3.Plot.Layer.Bar<number>({
name: "Stacked Bar Chart",
data: bar_data,
x: (d, i) => i * 4,
y: (d, i, stack) => d[stack],
stacks: [
{ name: "Blue Stack", options: { styles: { 'fill': 'slateblue' } } },
{ name: "Orange Stack", options: { styles: { 'fill': 'goldenrod' } } },
{ name: "Red Stack", options: { styles: { 'fill': 'firebrick' } } },
],
}),Create 3 line layers with random data.
new c3.Plot.Layer.Line({
name: "Series 1",
data: generate_random_legend_data(),
options: {
styles: { 'stroke': 'red' },
},
}),
new c3.Plot.Layer.Line({
name: "Series 2",
data: generate_random_legend_data(),
options: {
styles: { 'stroke': 'blue' },
},
}),
new c3.Plot.Layer.Line({
name: "Series 3",
data: generate_random_legend_data(),
options: {
styles: { 'stroke': 'green' },
},
}),Create a single dotted horizontal line.
new c3.Plot.Layer.Line.Horizontal({
name: "Horizontal Line",
data: [7],
line_options: {
styles: {
'stroke': 'violet',
'stroke-dasharray': '5 3',
'opacity': 0.75,
},
},
label_options: {
text: "Horizontal Line",
},
grab_line_options: {
events: {
'click': () => { alert("Click on Horizontal Line"); },
},
}
}),Create a layer of 3 vertical lines.
Note how this layer sets the name to false so it is not displayed in the legend.
new c3.Plot.Layer.Line.Vertical({
name: false,
data: [Math.random() * 100, Math.random() * 100, Math.random() * 100],
draggable: true,
line_options: {
styles: {
'stroke': 'darkorange',
'stroke-width': '1px',
},
},
label_options: {
text: (d, i) => "Event " + i,
alignment: 'top',
},
}),
new c3.Plot.Layer.Scatter({
name: "The Sun",
data: [7],
x: () => 80,
r: 10,
options: {
styles: { 'fill': 'gold' },
},
label_options: {
text: "sun",
styles: {
'fill': 'black',
'font-size': 'xx-small',
},
},
}),
],
});Now actually create the plot_legend and link it with the chart we just created.
Everything else is automatic, though we could override or extend the behaviour if we wanted to.
var plot_legend = new c3.Legend.PlotLegend({
anchor: $('<div></div>').appendTo($('#plot_legend_example'))[0],
anchor_styles: {
'display': 'inline-block',
'vertical-align': 'top',
},
width: '20%',
plot: plot,
}).render();Resize the chart to fit the window
window.onresize = function () { plot.resize(); }Invert the layers in the legend
$('#invert_layers').on('change', function () {
(<c3.Legend.PlotLegend>plot_legend).invert_layers = this.checked;
plot_legend.redraw();
});