How to make a legend is horizontally

Question

Please tell us how to make a horizontal legend.

And here are the results:

But I want this:

I have the following code:

<script type="text/javascript">

        //$(function () {
        function getJson() {
            var result = [];
            $.ajax({
                url: "WebService1.asmx/GetJson3",
                success: function (data) {
                    $.each(data, function (key, value) {
                        item = {
                            "company": value.BusinessUnitName,
                            "revenue": value.QTY_Case,
                            "expenses": value.QTY_Case_Target,
                            "cos": value.QTY_Case_LY
                        }
                        result.push(item);
                    });
                },
                async: false,
            });

            $("#columnChart").igDataChart({
                width: "280px",
                height: "200px",
                dataSource: result,
                legend: {
                    element: "columnLegend"
                },

                title: "title",
                subtitle: "subtitle",

                axes: [{
                    name: "xAxis",
                    type: "categoryX",
                    //label: "company",
                    labelTopMargin: 5,
                    gap: 0.4,  
                    overlap: 0.0,
 
                }, {
                    name: "yAxis",
                    type: "numericY",
                    maximumValue: 250000,
                    interval: 50,
                    minimumValue: 0,
                    formatLabel: function (val) {
                        var bVal = (val / 10000),
                        rounded = Math.round(bVal * 100) / 100;
                        return rounded + "M";
                    }
                }],
                series: [{
                    name: "series1",
                    title: "revenue",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "revenue"
                }, {
                    name: "series2",
                    title: "expenses",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "expenses"
                }, {
                    name: "series3",
                    title: "cos",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "cos"
                },
                ]
            });

        }
        $(function () {
            getJson();
        });

    </script>

I hope to be guided. Thank You, Best regard

I'm not sure what the HTML output looks like, but you might be able to set the three elements (revenue, expenses, cos) to each have a `display` of `inline-block` in CSS. Since you have the CSS tag on here. — Sam, Dec 15 '15 at 07:47
https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=igDataChart+horizontal+legend the first result is someone else asking the same question, to which they got an answer — Andrew Bone, Dec 15 '15 at 08:21
Thanks to Sam and Andrew Bone It was very good advice. I just added some code As they guide you. It's success. Best regard — hibino, Dec 16 '15 at 03:09

score 0 · Answer 1 · answered Jan 08 '16 at 09:43

The question is answered in the link provided by Andrew Bone. I will post the answer here as well so it's visible.

Make the table rows belonging to the legend to be displayed as inline-block.

#columnLegend tr {
    display: inline-block;
}

Another suggestion I have based on the code that you've provided is to not make the $.ajax call sync. Just initialize the igDataChart inside the success callback.

$.ajax({
    url: "WebService1.asmx/GetJson3",
    success: function (data) {
        $.each(data, function (key, value) {
            item = {
                "company": value.BusinessUnitName,
                "revenue": value.QTY_Case,
                "expenses": value.QTY_Case_Target,
                "cos": value.QTY_Case_LY
            }
            result.push(item);
            initChart();
        });
    }
});

hello Konstantin Dinev, Thanks for advice. I added code: #columnLegend tr {display: inline-block;}. Where — hibino, Jan 11 '16 at 11:12

How to make a legend is horizontally

1 Answers1