Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Adamantidis theodoros
110
igDataChart Line grid, XAxis labels are not fully visible
posted

Hello,

I am trying to make a line grid, the labels I have are DateTimes and are long and this cause problems because I cannot make them fully visible.

I would like the text to wrap to multiple lines (break the dateTime to date and time, 19/05/2021/newLine1:51).

At first, I tried by playing with the margins to make the labels visible.

I also read this post, but the solution did not work for my case

https://www.infragistics.com/community/forums/f/ignite-ui-for-jquery/95152/word-wrap-within-an-axis-label

Here is the code I use

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        td {
            vertical-align: top;
        }

        .chartElement {
            padding-bottom: 20px;
        }
    </style>
    <title>Bar and Column Series</title>
        rel="stylesheet" />
        rel="stylesheet" />
    <script src="">ajax.aspnetcdn.com/.../modernizr-2.8.3.js"></script>
    <script src="">code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="">code.jquery.com/.../jquery-ui.min.js"></script>
    <script src="">www.igniteui.com/.../adventureworks.min.js"></script>
</head>

<body>
    <script type="text/javascript">

        var lineData = { "\u002796330\u0027": [{ "Label": "19/3/2021\r\n15:00", "test1": 100, "test2": 972.22, "test3": 100, "test4": 972.22 }, { "Label": "19/3/2021\r\n17:00", "test1": 100, "test2": 4666.67, "test3": 8.33, "test4": 388.89 }], "\u0027968\u0027": [{ "Label": "19/3/2021 16:04", "test1": 75, "test2": 226.22, "test3": 49.12, "test4": 83.33 }] };
        function doGeneration() {
        }
        function assignData(id, data) {
            $("#" + id).igDataChart(
                {
                    dataSource: data
                }
            );
        };
        function createGrid(id, legendId, wcName, data) {
            $('#' + id).igDataChart(
                {
                    width: "100%",
                    height: "400px",
                    legend: { element: legendId },
                    axes: [
                        {
                            name: "xAxis",
                            type: "categoryX",
                            label: "Label",
                            crossingAxis: "yAxis",
                            labelLeftMargin: 10,
                            titlePosition: "bottom",
                        },
                        {
                            name: "yAxis",
                            type: "numericY",
                            minimumValue: 0,
                            maximumValue: 100,
                            labelHorizontalAlignment: "right",
                            labelRightMargin: 10
                        }
                    ],
                    series: [
                        {
                            name: "series1",
                            title: "test1",
                            markerType: "triangle",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test1",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        },
                        {
                            name: "series2",
                            title: "test2",
                            markerType: "circle",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test2",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        },
                        {
                            name: "series3",
                            title: "test3",
                            markerType: "diamond",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test3",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        },
                        {
                            name: "series4",
                            title: "test4",
                            markerType: "square",
                            type: "line",
                            xAxis: "xAxis",
                            yAxis: "yAxis",
                            valueMemberPath: "test4",
                            showTooltip: true,
                            isTransitionInEnabled: true,
                            isHighlightingEnabled: true
                        }
                    ],
                    horizontalZoomable: true,
                    verticalZoomable: false,
                    windowResponse: "immediate",
                }
            );
            assignData(id, data);
        }
        $('#LineCharts').ready(function () {
            var counter = 1;
            $.each(lineData, function (i, v) {
                var lineChartName = "lineChart" + counter;
                var legendName = "lineLegend" + counter;
                $('#LineCharts').append('<div style="display: table; margin-top: 50px">');
                $('#LineCharts').append('<div id="' + lineChartName + '" class="chartElement" style="display: table-cell; width: auto; padding-right: 50px;"></div>');
                $('#LineCharts').append('<div id="' + legendName + '" style="width: 100px; display: table-cell;"></div>');
                $('#LineCharts').append('</div>');
                createGrid(lineChartName, legendName, i, v)
                counter++;
            });
        });
    </script>
    <hr>
    <div id="LineCharts"></div>
</body>

</html>
Parents Reply Children