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.

github freenas / webui / src / app / core / components / viewchart / viewchart.component.ts View on Github external
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
  }
github freenas / webui / src / app / core / components / c3chart / c3chart.component.ts View on Github external
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;
  }
github EpistasisLab / pennai / lab / webapp / src / components / Gauge / index.jsx View on Github external
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: true
github odota / web / src / components / Match / MatchGraph.jsx View on Github external
const 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',
        },
github Scan-o-Matic / scanomatic / scanomatic / ui_server_data / js / src / components / PolynomialResultsPlotScatter.jsx View on Github external
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],
                ],
github freenas / webui / src / app / components / common / lineChart / lineChart.component.ts View on Github external
public render(conf?:any){
    if(!conf){
      conf = this.makeConfig();
    }
    
    let colors = this.colorsFromTheme();
    const color = {
      pattern: colors
    }
    conf.color = color;
    this.chart = c3.generate(conf);
  }
github reportportal / service-ui / src / main / resources / public / js / src / projectSettings / tabViews / defectTypes / defectTypeView.js View on Github external
drawDonutChart: 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

c3

D3-based reusable chart library

MIT
Latest version published 4 years ago

Package Health Score

63 / 100
Full package analysis