Draw trending icons inside chart plot

Question

Is there any way to draw icon/images/triangle anything inside the chart plot?

Like that image, this example, check the green triangle (the red mark is just to show). Is there any way to draw something like that inside?

I tried to using the legends, but it's kind hard to add a new one just for it.

Thanks

Edit: I tried using the API, but if I resize the page, the chart resize and the the image stays on the same, that's not good at all, I would like the image to remain on the side of the chart. Like the legend.

Does anyone know nice solution for it?

Answer 1

Use either labels or Renderer.

Add the following code at the end:

, function (chart) {

    chart.renderer.text('▲', 0, 0)
        .attr({
            align: 'right',
            zIndex: 8
        })
        .css({
            color: '#73903B',
            fontSize: '48px'
        })
        .add()
        .align({
            align: 'right',
            x: -10,
            verticalAlign: 'bottom',
            y: -40
        });

});

DEMO : http://jsfiddle.net/2PNCG/ (Fixed position when resize, bottom right / lower right)

Reference:
http://code.highcharts.com/highcharts.src.js (credits part)

Other possible approaches:

• Use chart.plotWidth, chart.plotLeft, chart.plotHeight with marginRight
• Use left, top in labels

Related Questions:
Adding a line of words towards the bottom of chart (Bottom Left / Lower left)
How do you add text to the bottom center of legend and bottom center of chart under legend? (Bottom center)
Highcharts - change font size of text on chart (Fixed position)
Move images rendered on highcharts on resize (Fixed position)

Answer 2

This is the kind of thing easily found in the API.