A new 3D Bar chart demo

Written by Richard Heyes, on 10th December 2022

A 3D Bar chart demo

I've added a new 3D Bar chart demo to the download archive called bar-menu-choices.html - an image of which is shown here. It's a standard 3D Bar chart but with the variantThreedAngle option set to 0 so that it doesn't have a perfectly correct 3D appearance - but still looks good.

To enable this chart a few new 3D options have been added to the Bar chart:

  • variantThreedXaxisColor (#ddd)
  • variantThreedYaxisColor (#ddd)
  • backgroundGridThreedYaxis (true)

These options will be available from the next release of RGraph - version 6.10. The full code for the chart is as follows:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [[37,31],[45,24],[15,36],[28,25]],
        options: {
            colors: ['#eab904','#ca6053'],
            variant: '3d',
            variantThreedAngle: 0,
            variantThreedYaxisColor: 'rgba(216,216,216,0.7)',
            variantThreedOffsetx:15,
            variantThreedOffsety:10,
            backgroundGridVlines: false,
            backgroundGridHlinesCount: 10,
            backgroundGridBorder: false,
            backgroundGridColor: 'gray',
            variantThreedYaxisColor: 'rgba(0,0,0,0.15)',                
            marginInner: 30,
            marginLeft: 55,
            marginBottom: 100,
            marginTop: 95,
            xaxis: false,
            yaxis: false,
            xaxisLabels:['Haddock &\r\nchips','Beef madras\r\nwith rice','Vegetable\r\nlasagne','Roast turkey &\r\ntrimmings'],
            xaxisLabelsOffsety: 3,
            yaxisLabelsBold: true,
            xaxisLabelsBold: true,
            yaxisTitle: 'Number of people',
            yaxisTitleBold: true,
            yaxisScaleMax: 50,
            yaxisLabelsCount: 10,
            key: ['Male','Female'],
            keyPosition: 'margin',
            keyPositionOffsetx: 10,
            keyPositionOffsety: -15,
            keyLabelsOffsety: 2,
            keyColorShape: 'circle',
            title: 'Menu choices',
            titleOffsety: -15,
            titleSize: 20
        }
    }).wave();
</script>