Related
This discussion has been locked.
You can no longer post new replies to this discussion. If you have a question you can start a new discussion

How to get rid of the annoying textfields that are rolling over the charts on the activity page in GC?

7508474
over 4 years ago

When on the activity page of my run, there are text shields over the charts (when you swipe over) so you can't see where where you are on the chart.

Can i change the place of the information (unther the chart) or switch it off?

  • 0 over 4 years ago

    Open the chart in the full screen mode (click the double arrow icon in the top right corner of the concerned chart). The bigger size makes it easier to read, or eventually also to zoom in and out certain sections.

  • 0 over 4 years ago in reply to trux

    Thanks for your answer. That option i know. But when i try to see where on the track some specific "action" happened, i need te map in the screen. Maybe there is an option to see the map in the in the full screen mode? That will do the trick i think.

  • 0 over 4 years ago in reply to 7508474
    7508474 said:
    Maybe there is an option to see the map in the in the full screen mode?

    Yes, of course, there is, but that's without the charts.

    Other than that, you can turn off the mouse-over tooltips over the charts only with the help of Local Overrides in the DevTools of the browser (you need to understand Javascript, though)

  • 0 over 4 years ago

    Oke, i understand. That's more effort than "looking around" the text fields so i keep it the way it is.

    Thanks for your help

  • 0 over 4 years ago in reply to 7508474

    If you move a mouse down, slightly outside of chart, then one tool-tip disappears, and the dot will be still on the map.

     

    For editing, it's not that hard, you can use CSS.
    The easiest way is to find an element's class (right click -> Inspect) and set display: none.

    .highcharts-tooltip, .highcharts-tooltip-box
{
  display: none;
}

    More effort if you want to move it somewhere.
    Below I quickly moved labels to the right, looks working, but I didn't test it more.

     

    For Windows & Firefox - open browser settings folder:
    %USERPROFILE%\AppData\Roaming\Mozilla\Firefox\Profiles\[PROFILE-CODE].default\

    Open or create folder: chrome
    Open or create file: userContent.css

    Add styles:

    @-moz-document domain(garmin.com)
{

  .highcharts-tooltip
  {
    left: 90% !important;
    top: -12px !important;
  }

  .highcharts-tooltip-box, rect[fill="#0F314D"]
  {
    display: none;
  }

  .highcharts-label[data-z-index="999"] > text
  {
    fill: #000 !important;
  }

  .highcharts-label[data-z-index="999"]
  {
    transform: translate(85%,-6px);
  }

}

  • 0 over 4 years ago in reply to BunBun!

    If you don't want to manually create the userContent.css file, you can apply the same code that BunBun! posted using Stylus for Chrome or Firefox

  • 0 over 4 years ago in reply to BunBun!

    He, thanks. Thats fun, it works. Seems this way you can create a complete page in your own design, if you want. Don't know if its worth the effort but looks like fun. Guess thats the magic off html/css, never used it before.