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

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

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

  • Ranjith Kumar

    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”>
    <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,
    dataField: ‘Day’,
    showGridLines: true
    colorScheme: ‘scheme01’,
    type: ‘column’,
    columnsGapPercent: 50,
    seriesGapPercent: 0,
    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

    <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;”>

    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


    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:

    Best Regards,

    Ranjith Kumar

    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

    • This reply was modified 7 years, 8 months ago by  Ranjith Kumar.


    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:

    Best Regards,

    jQWidgets Team

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.