Series value text is getting crop

2 posts, 0 answers
  1. Rohan
    Rohan avatar
    10 posts
    Member since:
    Sep 2012

    Posted 03 Sep Link to this post

    I have charts which have dyanamic Series value text so text is getting crop.

    $('#topStationsChart').kendoChart({
    dataSource: topFiveStation.LstTopFiveDataItem,
    chartArea: {
    height: 370
    },
    title: {
    text: selectedKPI + " by " + activeVariable,
    visible: true,
    },
    legend: {
    position: 'top'
    },
    seriesDefaults: {
    type: "bar"
    },
    series: [{
    //name: '',
    data: totalVisit,
    //type: 'column',
    stack: false,
    color: '#08889b'
    }, {
    field: 'HalfValueVariance',
    //categoryField: 'TopChartVariable',
    categoryField: 'TopVariableFullName', // ARME- 610
    type: 'line',
    width: 0,
    tooltip: {
    visible: true,
    template: function (e) {
    var value = e.value * 2;
    var strcommsepvalue = CommasSperatedNumber(value);
    var tooltipString = "";
    var KPINameString = selectedKPI + ($(".customSwitch span.active").text() == "Percent" ? "(%)" : " ");
    tooltipString += "<span style=\"text-align:center;display:inline-block;width:100%;\">";
    tooltipString += (activeVariable == "Top 5 Stations" ? "Station" : activeVariable) + " : " + e.category + "</span>";
    tooltipString += "<hr style=\"border-color:#ccc;margin: 5px 0;\" class=\"hrTooltps\">"
    tooltipString += KPINameString + " : " + "<span  style=\"float:right;display:inline-block;\">" + strcommsepvalue + "</span>";

    return tooltipString;
    },
    border: { color: "08889b" },
    autoHide: false
    },
    highlight: {
    toggle: function (e) {
    e.preventDefault();
    var visual = e.visual;
    var transform = null;
    if (e.show) {
    var center = visual.rect().center();
    // Uniform 1.5x scale with the center as origin
    transform = kendo.geometry.transform().scale(1.5, 1.5, center);
    }
    visual.transform(transform);
    }
    },
    markers: {
    size: 30,
    visual: function (e) {
    var src = kendo.format('/' + "{0}", e.dataItem.IconURL);
    if (e.dataItem.IconURL == null || e.dataItem.IconURL == undefined || e.dataItem.IconURL == '') {
    src = "/Content/Images/stationIcon_placeholder.png";
    }
    var image = new kendo.drawing.Image(src, e.rect);

    return image;
    }
    }
    }],
    valueAxis: {
    title: {
    text: strVarValTitle
    },
    labels: {
    //format: "{0}%"
    },
    line: {
    visible: true
    },
    majorGridLines: {
    visible: false
    },
    axisCrossingValue: 0,
    visible: true
    },
    categoryAxis: {
    line: {
    visible: true
    },
    majorGridLines: {
    visible: false
    },
    labels: {
    template: "#=shortLabels(value)#",
    rotation: "auto",
    visual: adjustLabelsForTopStationChart
    },
    visible: true,
    },
    tooltip: {
    visible: true,
    template: function (e) {
    var value = e.value;
    var strcommsepvalue = CommasSperatedNumber(value);
    var tooltipString = "";
    var KPINameString = selectedKPI + ($(".customSwitch span.active").text() == "Percent" ? "(%)" : " ");
    tooltipString += "<span style=\"text-align:center;display:inline-block;width:100%;\">";
    tooltipString += (activeVariable == "Top 5 Stations" ? "Station" : activeVariable) + " : " + e.category + "</span>";
    tooltipString += "<hr style=\"border-color:#ccc;margin: 5px 0;\" class=\"hrTooltps\">"
    tooltipString += "<span  style=\"float:left;display:inline-block;\">" + KPINameString + "</span>" + " : " + "<span  style=\"float:right;display:inline-block;\">" + strcommsepvalue + "</span>";

    return tooltipString;
    },
    background: "rgba(248,248,248,0.8)",
    color: "#333",
    autoHide: false
    //format: "{0}"
    },
    seriesHover: function(e) {
    $("#topStationsChart").css("cursor", "default");
    },
    render: function (e) {
    var tooltip = $(".customTooltipTop");
    e.sender.surface.bind("mouseenter", function (e) {
    if (e.element.parent.chartElement.content && e.element.parent.chartElement.text.indexOf('...') != -1) {
    var pos = e.element.bbox().getOrigin();
    tooltip.html(e.element.parent.chartElement.value)
                                .css({
                                left: pos.x - 60,
                                top: pos.y + 20
                                })
                                .show();
    }
    });
    e.sender.surface.bind("mouseleave", function (e) {
    tooltip.hide();
    });
    },
    });
    onBarLineChartHover(nBarLineChartLength, 13);
    } else {
    $("#topStationsChart").html("<div class='noData'>No Data Available</div>");
    }
    }

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    722 posts

    Posted 04 Sep Link to this post

    Hi Rohan,

    I have investigated the provided code snippets and I have noticed the there is a function specified for the "visual" option of the labels. It might be the cause of the disposition. Could you try commenting it out and see if the issue persists?

    adjustLabelsForTopStationChart

    If not, share the contents of the JavaScript function.

     

    Kind regards,
    Tsvetomir
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top