html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // set theme

    anychart.theme({

        linearGauge: {

            defaultPointerSettings: {

                led: {

                    // darken the color value

                    // exceeds the value of Pointer

                    dimmer: function () {

                        return '#e65100';

                    },

                    // pointer width as a percentage

                    // of the width gauge

                    width: '15%',

                    // set color pointer led

                    colorScale: {

                        type: 'linear-color',

                        colors: '#57a7b1'

                    },

                    // the distance between the "tiles"

                    // pointer to a percentage of the pointer height

                    gap: '.5%',

                    // set size "tiles" null

                    size: null

                },

                bar: {

                    // enable hover labels

                    hoverLabel: {

                        enabled: true,

                        fontColor: anychart.color.lighten('#455a64', 0.1)

                    },

                    // enable select labels

                    selectLabel: {

                        enabled: true,

                        fontColor: anychart.color.darken('#455a64', 0.5)

                    },

                    color: '#455a64',

                    // pointer width as a percentage

                    // of the width gauge

                    width: '1%',

                    // set label settings

                    label: {

                        enabled: true,

                        fontSize: '21px',

                        fontColor: '#455a64',

                        position: 'center',

                        offsetY: '-4%'

                    }

                }

            },

            defaultAxisSettings: {

                // set axis width

                width: '1%',

                // set label settings

                labels: {

                    fontColor: '#96a6a6',

                    fontSize: '21px',

                    fontWeight: 700

                },

                // set for axis orientation

                orientation: 'bottom'

            }

        }

    });

​

    // create data

    var data = [17.15, 14.55, 11.53, 5.35];

​

    // gauge type

    var gauge = anychart.gauges.linear();

    // create data set on our data

    gauge.data(data);

    // set global offset

    gauge.globalOffset('-5%');

    // set gauge padding

    gauge.padding([15, 20, 10, 20]);

    // set container id for the gauge

    gauge.container('container');

    // set position gauge

    gauge.layout('horizontal');

​

    // create scale (0-30)

    var scaleFirst = anychart.scales.linear();

    // set scale minimum

    scaleFirst.minimum(0);

    // set scale maximum

    scaleFirst.maximum(30);

    // set interval major axis ticks

    scaleFirst.ticks().interval(5);

​

    // create scale (0-24)

    var scaleSecond = anychart.scales.linear();

    // set scale minimum

    scaleSecond.minimum(0);

    // set scale maximum

    scaleSecond.maximum(24);

    // set interval major axis ticks

    scaleSecond.ticks().interval(3);

​

    // create led pointer of the data index zero

    var ledPointerFirst = gauge.led(0);

    // pointer offset as a percentage of the width gauge

    ledPointerFirst.offset('-20%');

    // set pointer name

    ledPointerFirst.name('LED Pointer First');

    // count "tiles"

    ledPointerFirst.count('6');

    // set scale

    ledPointerFirst.scale(scaleFirst);

​

    // create led pointer of the data index one

    var ledPointerSecond = gauge.led(1);

    // pointer offset as a percentage of the width gauge

    ledPointerSecond.offset('45%');

    // set pointer name

    ledPointerSecond.name('LED Pointer Second');

    // count "tiles"

    ledPointerSecond.count('8');

    // set scale

    ledPointerSecond.scale(scaleSecond);

​

    // create bar pointer of the data index two

    var barFirst = gauge.bar(2);

    // set pointer name

    barFirst.name('Bar Pointer First');

    // pointer offset as a percentage of the width gauge

    barFirst.offset('-23%');

    // set scale

    barFirst.scale(scaleFirst);

​

    // create bar pointer of the data index three

    var barSecond = gauge.bar(3);

    // set pointer name

    barSecond.name('Bar Pointer Second');

    // pointer offset as a percentage of the width gauge

    barSecond.offset('42%');

    // set scale

    barSecond.scale(scaleSecond);

​

    var labelBarFirst = barFirst.labels();

    // labels format, set current value gauge

    labelBarFirst.format(function () {

        return gauge.data().get(2, 'value');

    });

​

    var labelBarSecond = barSecond.labels();

    // labels format, set current value gauge

    labelBarSecond.format(function () {

        return gauge.data().get(3, 'value');

    });

​

    var axisFirst = gauge.axis(0);

    // axis offset as a percentage of the width gauge

    axisFirst.offset('-3%');

    // set axis scale

    axisFirst.scale(scaleFirst);

​

    var axisSecond = gauge.axis(1);

    // axis offset as a percentage of the width gauge

    axisSecond.offset('62%');

    // set axis scale

    axisSecond.scale(scaleSecond);

​

    // initiate gauge drawing

    gauge.draw();

​

});