Menu

Getting color of series in the tooltip and prevent tooltip going off the screen

pspalb
2012-05-24
2012-05-29
  • pspalb

    pspalb - 2012-05-24

    Hello,

    We are using Moxieapps Highchart v1.3.0
    we have two requirements in displaying the tooltip for line chart.

    i. the x axis is datetime axis. we need to format the date displayed in the tooltip. So using ToolTipData, we formatted the date in tooltip. But the colors of the series name in the tooltip is lost. The tooltip is shared. How to display the series name in the tooltip with the respective color?

    ii. Our tooltip may grow in height/width. In such scenario, the tooltip goes off the screen i.e half of the tooltip is visible and other half goes off the screen. I used html tag to wrap text in the tooltip. I tried applying width to the html tag. But there's no effect. How to prevent tooltip going off the screen?

    Kindly help in the issues.

    Thanks in Advance

     
  • Shawn Quinn

    Shawn Quinn - 2012-05-29

    Regarding #1: you can explicitly set the color that a series will appear as by using the "setColor" method on the Series' PlotOption configuration object. E.g.

    Series series = chart.createSeries()
        .setPlotOptions(new SeriesPlotOptions()
            .setColor("#4572A7")
        )
    

    Note that the default series colors are listed here if you need them.

    Within your custom ToolTipFormatter you can then style the text using pseudo HTML. E.g.

    chart.setToolTip(new ToolTip()
        .setEnabled(true)
        .setFormatter(new ToolTipFormatter() {
            public String format(ToolTipData toolTipData) {
                return "<span style='color:#4572A7'>" + 
                    toolTipData.getSeriesName() + "</span>: <strong>" + 
                    NumberFormat.getFormat("#.00").format(toolTipData.getYAsDouble()) + 
                    "</strong>";
            }
        })
    );
    

    Regarding #2: Highcharts doesn't automatically handle really large tooltips super well. I recall reading several posts over on the main Highcharts forums about this topic, so you may want to run some searches over there to see if you can find any pointers. If you do find anything helpful and could post what you find here for others to benefit from, that'd be great.

     

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.