Circle Chart

Pie chart without animation

new CircleChart({
    $container: document.getElementById('no-animation'),
    animated: false,
    isPie: true,
    background: '#FBE9E7',
    tooltips: true,
    definition: [
        {label: 'Poznan', name: 'poznan', cls: 'poznan', value: 1},
        {label: 'Warszawa', name: 'warszawa', color: '#F4511E', value: 1},
        {label: 'Srem', name: 'srem', cls: 'srem', value: 1},
        {label: 'Gdansk', name: 'gdansk', cls: 'gdansk', value: 1}
    ]
});

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}
    ]
});

One value chart

new CircleChart({
    $container: document.getElementById('one-value'),
    ringProportion: 0.42,
    tooltips: true,
    staticTotal: true,
    total: 100,
    middleCircleColor: '#E0F2F1s',
    background: '#D4E157',
    definition: [
        {label: 'Temperature', name: 'temp', color: '#009688', value: 32.98}
    ]
});

Pie chart

new CircleChart({
    $container: document.getElementById('pie-chart'),
    tooltips: true,
    background: '#A1887F',
    definition: [
        {label: 'Java', name: 'temp', color: '#5D4037', value: 3},
        {label: 'JavaScript', name: 'temp', color: '#5D4037', value: 2},
        {label: 'Others', name: 'temp', color: '#5D4037', value: 0.5}
    ]
});

Donut chart with update example update

new CircleChart({
    $container: document.getElementById('update-chart'),
    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}
    ]
});