CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
Andrew
Andrew

Reputation: 111

Highcharts - Display Marker Icon on Single Value

Looking to create single markers on my Highcharts graph, the expected outcome should look something like this - http://jsfiddle.net/m1mqv4z2/

{
            x: Date.UTC(2014, 6, 31)
            y: 26.5,
            marker: {
                symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
            }
        },

I'm am looking for the above icon to be displayed on this chart - http://jsfiddle.net/wkaLs9ub/3/. So for example purposes i want to set the sun icon to the middle value of this chart.

The approach I've tried is shown in the above snippet, this code is nested in the data like shown in the first fiddle but I've had no success. Is this possible in the functionality of Highcharts?

Upvotes: 2

Views: 2037

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

As you've pointed out, you need to set marker.symbol for your point. In your data it would look like this:

data: [
    [Date.UTC(2014, 6, 31), 0.8446],
    { x: Date.UTC(2014, 8, 18), y: 0.736, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } },
    [Date.UTC(2014, 7, 01), 0.8283],
    // ...
]

The data of your detail chart is dependant on this piece of code, which fills the detailData array:

$.each(masterChart.series[0].data, function () {
    if (this.x >= detailStart) {
        detailData.push([this.x, this.y]);
    }
});

Here you need to also transfer over the marker.symbol details. You also need to include enabled: true because the chart has it disabled as a whole. You could update this piece of code for example like this:

$.each(masterChart.series[0].data, function () {
    if (this.x >= detailStart) {
        // If it has a symbol, include that information
        if(this.marker && this.marker.symbol) 
            detailData.push({x: this.x, y: this.y, marker: { enabled: true, symbol: this.marker.symbol }});
        // Else, just include x and y
        else
            detailData.push([this.x, this.y]);
    }
});

See this updated JSFiddle of how it works.

Upvotes: 5

Related Questions