jQuery UI Widgets › Forums › Chart › Tooltip Showing on the bar at the end and begin

Tagged: , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Christopher 8 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Tooltip Showing on the bar at the end and begin Posts
  • July 19, 2016 at 7:52 am Tooltip Showing on the bar at the end and begin #85845

    Ranjith Kumar
    Participant

    Hi Team,

    we have a functionality to Click the Bar chart and opening the details in window and we are displaying the tooltip on mouseover .

    Issue: when we have a minimum value on the x-axis last Index and begin Index Bar, the tooltip is hiding the bar and not able click the bar

    Please check the following example

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>jqxChart Column Series Example</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxchart.core.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare chart data as an array
    var sampleData = [
    { Day:’Monday’, Keith:1, Erica:15, George: 25},
    { Day:’Tuesday’, Keith:25, Erica:25, George: 30},
    { Day:’Wednesday’, Keith:30, Erica:20, George: 25},
    { Day:’Thursday’, Keith:35, Erica:25, George: 45},
    { Day:’Friday’, Keith:20, Erica:20, George: 25},
    { Day:’Saturday’, Keith:30, Erica:20, George: 30},
    { Day:’Sunday’, Keith:10, Erica:05, George: 1}
    ];

    // prepare jqxChart settings
    var settings = {
    title: “Fitness & exercise weekly scorecard”,
    description: “Time spent in vigorous exercise”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    xAxis:
    {
    dataField: ‘Day’,
    showGridLines: true
    },
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘column’,
    columnsGapPercent: 50,
    seriesGapPercent: 0,
    valueAxis:
    {
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: true,
    description: ‘Time in minutes’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘Keith’, displayText: ‘Keith’},
    { dataField: ‘Erica’, displayText: ‘Erica’},
    { dataField: ‘George’, displayText: ‘George’}
    ]
    }
    ]
    };

    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);

    });
    </script>
    </head>
    <body class=’default’>
    <div style=’height: 600px; width: 682px;’>
    <div id=’host’ style=”margin: 0 auto; width:850px; height:400px;”>
    <div id=’jqxChart’ style=”width:850px; height:400px; position: relative; left: 0px; top: 0px;”>
    </div>
    </div>
    </div>
    </body>
    </html>

    In the above example Monday -> Keith:1, Sunday->George: 1, If we hover on this bars, the bar is unable to see , to perform click operation and its appending on the x-axis

    Please let us know how to solve this issue?

    Thanks In Advance
    Ranjith

    July 20, 2016 at 7:39 am Tooltip Showing on the bar at the end and begin #85886

    Christopher
    Participant

    Hi Ranjith Kumar,

    you can create a custom ToolTip formating function to display the text you need in a better format so the tooltip appears over each bar and doesn’t get in the way. Here is a modification of your code with the needed implementation:
    http://jsfiddle.net/7RDBc/984/

    Best Regards,
    Christopher

    August 2, 2016 at 6:21 am Tooltip Showing on the bar at the end and begin #86236

    Ranjith Kumar
    Participant

    Hi Christopher,

    Add to your implementation please check the below link

    In the above link Monday -> PeterKeith:1, Sunday->GeorgeAttokannan: 1, If we hover on this bars, the bar is unable to see , to perform click operation and its appending on the x-axis

    August 2, 2016 at 8:10 am Tooltip Showing on the bar at the end and begin #86240

    Christopher
    Participant

    Hi Ranjith Kumar,

    The text in the tooltip has to be short so it doesn’t go over the neighbour columns when the value of the serie is too low. Here is a workaround for your case:
    https://jsfiddle.net/gv3u7ncd/13/

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.