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
1495
Legend inside chart with tooltip formating
posted

Hi,

We face following problems how to fix that like showing in sample snapshot?

  1. How to place legend inside the chart, currently it is in the left side above the chart?
  2. How to left align yaxis label values, currently all values are right aligned?
  3. Two decimals tooltip values format with comma's like (5,000.00 and 20,000.00) with datetime format?
  4. How to set HorizontalCrosshairVisibility  = false ?
  5. Small sample application is really very helpful for us.

  • 16310
    Offline posted

    Hi Elinder.

    Please find anwers to your questions below:

    1.How to place legend inside the chart, currently it is in the left side above the chart?

    You can use css to place the element wherever you like, for example:

                    
               style="left: 90px; top: 60px; position: absolute;"/>


    2.How to left align yaxis label values, currently all values are right aligned?

    There is the labelHorizontalAlignment property for axes to achieve that:

                        {
                            name: "PopulationAxis",
                            type: "numericY",
                            labelHorizontalAlignment: "left",
                        }


    3.Two decimals tooltip values format with comma's like (5,000.00 and 20,000.00) with datetime format?

    I didn't understand your query here, could you please clarify ? Do you want to display a numeric value like 2.000 with a comma as a separator ? What about the datetime format ?


    4.How to set HorizontalCrosshairVisibility  = false ?

    You can use the horizontalLineVisibility property of a series object. It takes values "visible" or "collapsed" and collapsed hides the relevant line:

         {
          type: "crosshairLayer",
          name: "crosshairLayer",            
          targetSeries: "1995Population",
          horizontalLineVisibility: "collapsed"
         }


    5.Small sample application is really very helpful for us.

    You can find a sample demonstrating how to use the above mentioned properties. I hope it helps.

    chartExample.zip
    • 1495
      Offline posted in reply to Hristo Anastasov

      Hi Hristo,

      Thank you so much for quick response, Our mostly problems are solved only few minor issues,

      1. Your provided solution is not working, its throw attached errors.
      2. When we open your sample application its throw error Failed to open and same error occured in our real application, due to this error our application takes alot of time for loading. How to fix that issue?
      3. 1st is not working when we set this style="left: 90px; top: 60px; position: absolute;"/>, our legend behind the chart and its not visible, We need a property like legendInsideChart. We use bootstrap for styling, when we set positions its not working in small resolution like mobile or tablets.
      4. 2nd working
      5. Third Yes we need a numeric value like 2,000.00 with a comma as a separator, We need a datetime format like 07-27-2015 (MM-DD-YYYY) in our data collection date format is as 2015-01-18T00:00:00. you can see in my previous attached snapshot. 
      6. Fourth working
      • 16310
        Offline posted in reply to Eric Linder

        Hi,

        Thank you for clarifying the exact position. To achieve this you can place the legend inside the chart div element and provide the legend the following css:

                <div class="col-md-12 chart-body" id="priceChart" style="background-color: #EBF3FB; margin: 0px 0px 20px 0px;overflow:hidden;">
                    <div id="chartLegend" style="position: relative; float: right; left: -10px; top:5px; z-index: 10000;"></div>
                </div>

        Please see the attached sample. I hope this meets your requirements. Please let me know if you have further questions on the matter, I will be glad to help.

        Chart_v5.zip
        • 1495
          Offline posted in reply to Hristo Anastasov

          Hi Hristo,

          Thank you so much your provided solutions solved our problems.

          • 16310
            Offline posted in reply to Eric Linder

            I am glad this helped you resolve your issues. I am closing this ticket now, but it may be reopened within 30 days of closure, if anything occurs.

            • 1495
              Offline posted in reply to Hristo Anastasov

              Hi Hristo,

              We face one more problem with lower chart tooltip

              1. Tooltip is cutting when we move mouse in lower chart near to bottom of series and most right series points, you can see in attached snapshots.  Tooltip is slightly push up when mouse pointer near to bottom of series and push left when at most right corner. How can we fix it?
              • 16310
                Offline posted in reply to Eric Linder

                Hello,

                Try with setting a z-index: 10000 css property to the tooltip container element. You can do this in the tooltipShown event. Please let me know if this worked or if would need to search for alternative solution.