Labels for single bars

[christian niss]

Hi,

I want to use a stacked bar chart to display

* a set value for every month (grey)
* a "current value" for every month (blue)
* the difference between set and current value (either green for a positive result or red for a negative result)

moreover I would like to display the percentage of the discrepancy above the bar charts (either +30% or -40%)

however I didnot find any way to fix this problem.

the idea would be to add a "label" property to the data source of the difference value - but it seems that I can only use the value base for the bar as label :(

Any ideas how to get the difference percentage displayed for each month on top of my bars?

Thanks in advance
CHris

[christian niss]

BTW - here my datasource

    <div class="chart-wrapper" style="float:left">
        <div id="chart" style="width: 750px"></div>
    </div>
    <script>
    
 
        var myData = [
        {
        month: "Jan",
        set: 8044,
        current: 27226,
        difference_pos: 19182,
        difference_neg: 0,
        label: "+238%"
            },{
        month: "Feb",
        set: 6676,
        current: 3672 ,
        differnece_pos:0 ,
        difference_neg:3004 ,
        label: "-45%"
            }, {
        month: "Mar",
        set: 7304 ,
        current: 789 ,
        difference_pos: 0,
        difference_neg: 6515,
        label: "-89%"
            }
        ];


        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: ""
                },
                dataSource: myData,
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "column"
                
                },
                series: [{
                           
                    name: "set value",
                    stack: "setcol",
type: "column",
                    field: "set",

                }, {
                    name: "Positive difference",
                    stack: "setcol",
type: "column",
                    field: "difference_pos",
                    labels: {
                    background: "transparent",
                    visible: "true",
                    template: "#=data.label#"
                    }
                },  {
                    name: "current",
                    stack: "currentcol",
type: "column",
                    field: "current",
                } ,{
                    name: "difference negative",
                    stack: "currentcol",
  type: "column",
                    field: "difference_neg",
               }],
                seriesColors: ["#cccccc", "#00ff00", "#0000ff", "#8888ff", "#ff0000"],
                valueAxis: {
                    labels: {
                        template: "#= kendo.format('{0:N0}', value / 1000) # M"
                    },
                    line: {
                        visible: false
                    }
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr","Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= kendo.format('{0:N0}', value) # €"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);

</div>
</body>
</html>

Question - how to I implement my label template to get the column "label" of my data object displayed.

[Iliana Dyankova]

Hi Chris,

In order to reach the "label" field you should use the dataItem (documentation link). I.e.: 

$("#chart").kendoChart({
  //....
  series: [{
     //....
     {
     name: "Positive difference",
     //....
     labels: {
       //....
       template: "#=dataItem.label#"
     }
  },
  }],
  //....
});

Regards,
Iliana Nikolova
Telerik