Multiple subtitles in single straight line using Custom DOM - CanvasJS JavaScript Charts

Multiple subtitles in single straight line using Custom DOM - CanvasJS JavaScript Charts

by canvasjs

HTML

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

<div id="subtitles">
    <div id="subtitle1" style="position: absolute;">Subtitle One</div>
    <div id="subtitle2" style="position: absolute;">Subtitle Two</div>
    <div id="subtitle3" style="position: absolute;">Subtitle Three</div>
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
    title:{
        text: "Multiple Subtitles in one line",           
        fontSize: 40
    },
    subtitles: [{
        text: "subtitle",
        fontColor: "transparent"
    }],
    data: [{			
        type: "column",
        dataPoints: [
            { label: "apple",  y: 18  },
            { label: "orange", y: 15  },
            { label: "banana", y: 25  },
            { label: "mango",  y: 30  },
            { label: "grape",  y: 28  }
        ]
    }]
});

chart.render();
positionSubtitles(chart);
$(window).resize(function() {
		positionSubtitles(chart);
});

function positionSubtitles(chart){  
    $("#subtitle1").css({
        top: chart.title.bounds.y2 + "px",
        color: "red",
        fontSize: chart.subtitles[0].get("fontSize")
    });

    $("#subtitle2").css({
        top: chart.title.bounds.y2 + "px",
        color: "black",
        fontSize: chart.subtitles[0].get("fontSize"),
        left: (chart.bounds.x2 - chart.bounds.x1) / 2 - $("#subtitle2").width() / 2 + "px"
    });

    $("#subtitle3").css({
        top: chart.title.bounds.y2 + "px",
        color: "green",
        fontSize: chart.subtitles[0].get("fontSize"),
        left: chart.bounds.x2 - $("#subtitle3").width() + "px"
    });
}