Underline labels in a Kendo Chart legend

0
votes

Sorry if this is a basic question, but is it possible to underline the labels for my Kendo chart legend? Bold, Italic, etc... is no problem but can't seem to find any info on how to underline. Would it be somewhere in here?

categoryAxis: {
      field: "Name",
      labels: {
         rotation: 315,
             font: "bold italic 10px sans-serif"
            }
        }
1
kendo-uitelerikkendo-chart

1 Answers

3
votes

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script>
        $(document).ready(function () {
            $("#example").kendoChart({
                title: {
                    text: "Gross domestic product growth \n /GDP annual %/"
                },
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "area",
                    area: {
                        line: {
                            style: "smooth"
                        }
                    }
                },
                series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
                }, {
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                }, {
                    name: "Haiti",
                    data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: 315,
                        font: "bold italic 10px sans-serif;text-decoration: underline;"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        });
    </script>
</body>
</html>

Let me know if any concern.