Stacked Bar Chart with Index Labels placed inside - CanvasJS

HTML5 Stacked Bar Chart with Index Labels placed inside

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
                    title:{
                        text:"Test"
                    },
                    animationEnabled: true,
                    axisX:{
                        interval: 1,
                        labelFontSize: 12,
                        lineThickness: 1,
						viewportMinimum: -0.3
                    },
                    axisY2:{
                        valueFormatString: "$0",
                        lineThickness: 1,
                        tickLength: 0,
                        labelFontSize: 12,
                        interval: 2500,
						viewportMaximum: 30600
                    },                    
                    legend:{
                        verticalAlign: "top",
                        horizontalAlign: "center"
                    },

                    data: [
                    {     
                        type: "stackedBar",
                        name: "Test 1",
                        showInLegend: true,
                        axisYType: "secondary",
                        color: "#7E8F74",
                        dataPoints: [
                            {y: 18000, label: "Test 1"},
                            {y: 16000, label: "Test 2" },
                            {y: 14000, label: "Test 3"   }
                        ]
                    },
                    {     
                        type: "stackedBar",
                        name: "Test 2",
                        showInLegend: true,
                        axisYType: "secondary",
                        color: "#DB9079",
                        dataPoints: [
                            {y: 10323, label: "Test 1" },
                            {y: 11118, label: "Test 2" },
                            {y: 4000, label: "Test 3"   }
                        ]
                    }
                    ]
                });
                chart.render();