C3 Charts

C3 Charts

c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.

1. Initialize the plugin by referencing the necessary files:
                    
                        <link href="/path/to/c3.css" rel="stylesheet" type="text/css">
                        <script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
                        <script src="/path/to/c3.min.js"></script>
                    
                
2. The component will bind to any existing DOM element.
                    
                        <div id="chart"></div>
                    
                
3. Basic usage may look something like this.
                    
                        var chart = c3.generate({
                            bindto: '#chart',
                            data: {
                              columns: [
                                ['data1', 30, 200, 100, 400, 150, 250],
                                ['data2', 50, 20, 10, 40, 15, 25]
                              ]
                            }
                        });


                        // C3 supports the asynchronous module definition (AMD) API. If you use RequireJS, you can load like this:
                        require.config({
                            baseUrl: '/js',
                            paths: {
                                d3: "http://d3js.org/d3.v3.min"
                            }
                        });

                        require(["d3", "c3"], function(d3, c3) {
                            c3.generate({
                                ...
                            });
                        });