Circle Chart

It is simple circle chart component, based on SVG. Online demo.

Install

You can install manually or either by using npm:

npm install circle-chart

Usage

Simple donut chart:

            new CircleChart({
                $container: document.getElementById('donut'),
                ringProportion: 0.42,
                middleCircleColor: '#BDBDBD',
                background: '#D1C4E9',
                definition: [
                    {label: 'Poznan', name: 'poznan', cls: 'poznan', value: 1},
                    {label: 'Warszawa', name: 'warszawa', color: '#D84315', value: 1},
                    {label: 'Srem', name: 'srem', cls: 'srem', value: 1},
                    {label: 'Gdansk', name: 'gdansk', cls: 'gdansk', value: 1}
                ]
            });

Options

• container - Chart container, for example a div
• size - Radius of the circle. In default it takes width of the container
• staticTotal - If set to true, total value will be not calculated. It will be taken from total option. Default - false.
• total - Chart total value. In default it is calculated from data.
• ringProportion - Middle circle proportion to container size. It is used with donut charts only.
• middleCircleColor - Middle circle bacground color. In default it will add only circle-chart-background-empty to the path.
• background - Bacground of the chart. In default it will add circle-chart-background to the circle.
• animated - If set to true chart will be animated. Default - true.
• speed - Speed of the animation. Default 1.
• durration - Sleep time duration between chart's path update. In ms, default - 10.
• tooltips - If set to true tooltips will be displayed on click. Default - false.
• definition - Array of chart paths definition. It contains objects with:

• label - Label of the path
• name - Name of the attribute in data object
• cls - Path's css class name
• color - Path's color.
• value - Initial value

Events

• onAfterRender - Triggered when the chart render.
• onUpdateStart - Triggered before start updating chart.
• onUpdateEnd - Triggered after update chart.
• onPathClick - Triggered on path click.

Methods

• update(data) - It is update chart values. Data is an object with values defined according to definition.

            var updateChart = new CircleChart({
                $container: document.getElementById('update-chart'),
                ringProportion: 0.42,
                middleCircleColor: '#BDBDBD',
                background: '#D1C4E9',
                tooltips: true,
                definition: [
                    {label: 'Poznan', name: 'poznan', cls: 'poznan', value: 1},
                    {label: 'Warszawa', name: 'warszawa', color: '#D84315', value: 1},
                    {label: 'Srem', name: 'srem', cls: 'srem', value: 1},
                    {label: 'Gdansk', name: 'gdansk', cls: 'gdansk', value: 1}
                ]
            });
            document.querySelector('#update-chart-trigger').addEventListener('click', function(e){
                e.preventDefault();
                updateChart.update({
                    poznan: 10,
                    warszawa: 1,
                    srem: 8,
                    gdansk: 0
                });
            });

• setTotal(value) - Set total value of the chart.

How to run example page?

Clone repository and:

 npm install
 gulp

License

MIT: https://github.com/mkawczynski07/circle-chart/blob/master/LICENSE