Search code examples
csssvghighchartsrenderer

Set color of highcharts renderer path title


I'm using a bubble graph to show 2 data points and draw a horizontal and vertical line. What I would like to do is set the color of the title to the same color as the line. The title behaves like a tooltip for the line.

The line is drawn using the following function:

function drawLine(chart, line)
{
    chart.renderer.path([
        "M", line.startX, line.startY,
        "L", line.endX, line.endY
    ])
    .css({
        color: line.color,
        fill: line.color
    })
    .attr({
        "stroke-width": 2,
        stroke: line.color,
        title: line.title || "",
        color: line.color,
        fill: line.color,
        useHTML: true,
        zIndex: 2
    })
    .add();
}

I'm not sure what I can do to change the color of the title text. Any suggestions?

See this pen for the code: http://codepen.io/kdbruin/pen/EKNBor


Solution

  • Title in this case is part of browser/OS and to modify color and style you could use something else - like a custom element showing on mouseover/mouseenter. You could add your custom text using Highcharts renderer.

    Example: http://codepen.io/anon/pen/zqNOyp