html, body, #container {

    width: 100%;

    height: 90%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create data set on our data

    chartData = {

        title: 'titre',

        header: ['#', 'actions achevées','actions lancées','études achevées et validées',

                 'études préopérationnelles', 'études de faisabilité','abandon' 

                   ],

        rows: [

​

['Local(L)',2,0,0],

['Communautaire(C)',0,1,0,3,4,0],

['(L)+(C)',0,1,0,5,0,0],

['Métropolitain(M)',0,0,0,0,1,0],

['(C)+(M)',3,2,2,2,0,0],

['(L)+(C)+(M)',4,0,0,2,0,0],

​

​

        ]

    };

​

    // create column chart

    var chart = anychart.column3d();

​

    // set chart data

    chart.data(chartData);

​

    // turn on chart animation

    chart.animation(true);

​

    chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

​

    // set titles for Y-axis

    chart.yAxis().title('Nombre d actions');

​

    // turn on legend

    chart.legend()

            .enabled(true)

            .fontSize(10

                     )

            .padding([0, 0, 20, 0]);

​

    // set interactivity settings

    chart.interactivity().hoverMode('single');

​

    // set tooltip settings

    chart.tooltip()

            .positionMode('point')

            .position('center-top')

            .anchor('center-bottom')

            .offsetX(10)

            .offsetY(10)

            .format('{%SeriesName}: ${%Value}{groupsSeparator: }');

​

    // set 3D settings

    chart.zAspect(25)

            .zPadding(30)

            .zAngle(50

                   )

            .zDistribution(true);

​

    // set container id for the chart

    chart.container('container');

​

    // initiate chart drawing

    chart.draw();

});