Format indexlabel in Range Spline Area Chart - CanvasJS JavaScript Charts

Format indexlabel in Range Spline Area Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://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",
{
    title: {
        text: "Format indexlabel in Range Spline Area Chart"
    },
	
    data: [
        {
            type: "rangeSplineArea",
            color: "#6DCFF6",
            fillOpacity: .3,
            
            indexLabelFormatter: function(e){
                // 0 for bottom, 1 for top
                if(e.index === 0)
                    return "";
                return e.dataPoint.customLabel;                
            },
            
            dataPoints: [
                { x: 10, y: [18.86, 55.76], customLabel: "A" },
                { x: 20, y: [55.95, 98.26], customLabel: "B" },
                { x: 30, y: [48.27, 72.90], customLabel: "C" },
                { x: 40, y: [67.65, 86.65], customLabel: "D" },
                { x: 50, y: [25.50, 71.26], customLabel: "E" }
            ]
        }
    ]
});
chart.render();