How to use c3 - 10 common examples
To help you get started, we’ve selected a few c3 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
freenas / webui / src / app / core / components / viewchart / viewchart.component.ts View on Github 
conf.data.hide.push(legendItem.name);
}
}
}
if(this.chartType != "donut" && this.chartType != "pie"){
conf.data.onmouseout = (d) => {
this.showLegendValues = false;
}
}
if(conf.axis && conf.axis.y && this.max){
conf.axis.y.max = this.max;
}
//DEBUG: console.log("GENERATING DATA FROM ...");
this.chart = c3.generate(conf);
this.chartLoaded = true;
return this.chart
}protected render(){
if(this.chartConfig.data.columns.length == 0 || !this.data){
console.warn("C3: data.columns is empty");
return -1;
}
this.chart = c3.generate(this.chartConfig);
this.chartLoaded = true;
return this.chart;
}renderChart(value, chartKey, chartColor) {
c3.generate({
bindto: `.${chartKey}`,
data: {
columns: [
['data', value]
],
type: 'gauge',
//onclick: function (d, i) { console.log("onclick", d, i); },
//onmouseover: function (d, i) { console.log("onmouseover", d, i); },
//onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
gauge: {
label: {
format: function(value) {
return value.toFixed(2);
},
show: trueconst drawGraphs = (props, id) => {
if (props.match && props.match.graphData) {
const data = props.match.graphData[props.type];
const color = props.type === 'difference' ? null : {
pattern: colorArray,
};
const type = props.type === 'difference' ? 'area-spline' : 'spline';
const valueFormat = props.type === 'xp' ? xp => `${xp} - ${strings.th_level} ${getLevelFromXp(xp)}` : undefined;
c3.generate({
bindto: `#${id}`,
data: {
x: 'time',
columns: data,
type,
},
color,
axis: {
x: {
tick: {
format(x) {
return formatSeconds(x);
},
},
label: 'Time',
},drawSVG() {
const { calculated, independentMeasurements } = this.props.resultsData;
const { slope, intercept } = this.props.correlation;
const corr = x => (slope * x) + intercept;
const yMax = Math.max(...calculated);
const xMax = Math.max(...independentMeasurements);
const rangeMax = Math.ceil(Math.max(xMax, yMax) * 1.1);
return c3.generate({
bindto: this.divRef,
data: {
xs: {
calculated: 'independentMeasurements',
'Identity Line': 'identityLine_x',
Correlation: 'correlation_x',
},
columns: [
['calculated'].concat(calculated),
['independentMeasurements']
.concat(independentMeasurements),
['Identity Line', 0, rangeMax],
['identityLine_x', 0, rangeMax],
['Correlation', corr(0), corr(rangeMax)],
['correlation_x', 0, rangeMax],
],function onEnter() {
c3.generate(config);
setTitle(config);
}defaultCharting(){
var columns = [this.props.metric.x];
for(let i=0;ipublic render(conf?:any){
if(!conf){
conf = this.makeConfig();
}
let colors = this.colorsFromTheme();
const color = {
pattern: colors
}
conf.color = color;
this.chart = c3.generate(conf);
}defaultCharting(){
var columns = [this.props.metric.x];
for(let i=0;idrawDonutChart: function (data) {
var $el = $('[data-js-chart-container]', this.$el);
this.chart = c3.generate({
bindto: $el[0],
data: {
columns: data.columns,
type: 'donut',
order: null,
colors: data.colors
},
size: {
width: 56,
height: 56
},
interaction: {
enabled: true
},
legend: {
show: false
