Animation From Left

Animation From Left

by Dinesh Parne

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
      animationEnabled: true,
      axisX: {
        interval: 1,
        lineThickness: 1
      },
      axisX2: {
        interval: 1,
        lineThickness: 1
      },
      axisY: {
        valueFormatString: '#%',
        lineThickness: 1,
        gridThickness: 0,
        maximum: 0.3,
        minimum: 0,
        reversed: false
      },
      dataPointMaxWidth: 20,
      data: [
      	{
      		type: 'bar',
      		color: '#00FF00',
      		indexLabelPlacement: 'outside',
      		axisXType: 'primary',
      		dataPoints: [
          	{ y: 0.28, label: 'Some Long Label A', indexLabel: '100% Some Long Label A' },
          	{ y: 0.12, label: 'Some Long Label B', indexLabel: 'B' }
          ]
    		}
      ]
    });

chart.render();