Published
Edited
May 30, 2020
md`# Grouped bar chart in C3`
md`Set up C3 and it''s dependency D3 as per https://observablehq.com/@aaronkyle/learning-c3-js-donut-charts-in-observable`
d3 = require("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js")
c3 = require("https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js")
css = {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css";
return document.getElementsByTagName("head")[0].appendChild(link);
}
chart = c3.generate({
bindto: '#bar-chart',
data: {
columns: [
['data1', 30000, 48000, 51000, 40000, 15000, 25000],
['data2', 35000, 45000, 50000, 15000, 50000, 15000]
],
type: 'bar',
labels: {
format: d3.format('$')
}
},
grid: {
y: {
lines: [{value: 0}]
}
},
axis: {
rotated: true
}
});
html`<div id="bar-chart"></div>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
