CODEWITHSUNDEEP
javascriptcanvasjs
Johnny
Johnny

Reputation: 146

how to put words and numbers into bars of a chart made with CanvasJs?

I want to design a chart like in the foto. The problem is, that I don't know how to put some labels in the bar! Also I don't want to show up the axes. And I also want to put the numbers like variables, because this chart is a result of a calculation of my calculator, is this possible?

I want the chart exactly like this!

<html>
<body>
<div id="chartContainer" style="height: 370px; width: 100;"></div>
</body>

<script>
//--------------------------------------CHART---------------
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
        text: "Das können Sie beim Widerspruch einer Lebensversicherung herausholen:",
        fontFamily: "arial black",
        fontColor: "#695A42"
    },
    axisX: {
        display: false,
        interval: 1,
        intervalType: "year"
    },
    axisY:{
        display: false,
        valueFormatString:"$#0bn",
        gridColor: "#B6B1A8",
        tickColor: "#B6B1A8"
    },
    toolTip: {
        shared: false
    },
    data: [{
            type: "stackedColumn",
            showInLegend: true,
            color: "#134d59",
            name: "Q1",
            dataPoints: [
            { y: 6.75, x: new Date(2010,0) },
            { y: 8.57, x: new Date(2011,0) },
            { y: 10.64, x: new Date(2012,0) }
        ]
        },
        {        
            type: "stackedColumn",
            showInLegend: true,
            name: "Q2",
            color: "#e53011",
            dataPoints: [
            //  { y: 6.82, x: new Date(2010,0) },
                { y: 9.02, x: new Date(2011,0) },
            //  { y: 11.80, x: new Date(2012,0) }

            ]
        },
        {        
            type: "stackedColumn",
            showInLegend: true,
            name: "Q3",
            color: "#92c13f",
            dataPoints: [
            //  { y: 7.28, x: new Date(2010,0) },
            //  { y: 9.72, x: new Date(2011,0) },
                { y: 13.30, x: new Date(2012,0) }
            ]
        }]
});
chart.render();

function toolTipContent(e) {
    var str = "";
    var total = 0;
    var str2, str3;
    for (var i = 0; i < e.entries.length; i++){
        var  str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\"> "+e.entries[i].dataSeries.name+"</span>: $<strong>"+e.entries[i].dataPoint.y+"</strong>bn<br/>";
        total = e.entries[i].dataPoint.y + total;
        str = str.concat(str1);
    }
    str2 = "<span style = \"color:DodgerBlue;\"><strong>"+(e.entries[0].dataPoint.x).getFullYear()+"</strong></span><br/>";
    total = Math.round(total * 100) / 100;
    str3 = "<span style = \"color:Tomato\">Total:</span><strong> $"+total+"</strong>bn<br/>";
    return (str2.concat(str)).concat(str3);
}

}
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</html>

https://jsfiddle.net/c74wtx5n/

Upvotes: 0

Views: 212

Answers (1)

Abhijeet Abnave
Abhijeet Abnave

Reputation: 891

For giving labels inside bars you need to append following in your data set.

indexLabel:"{y} $",
indexLabelPlacement: "inside",

For hiding axis and its labels add following in axis options

gridThickness: 0,
lineThickness: 0,
labelFormatter: function(e){
            return  "";
    },
tickLength: 0,

I have modified your Jsfiddle, Here is the link to your solution

If you want to learn more about canvasJs customization go here.

Upvotes: 1

Related Questions