score:0
given that highcharts is just svg you can always go directly and manipulate the svg to show the images you want, usually with just css. you can inspect the chart with chrome's web inspector and find the elements you want to style. i have to warn you though that having customized highcharts myself in the past has made upgrading to newer versions difficult.
score:0
you can add another scatter
plot to your series
that contains specific markers
: http://jsfiddle.net/zz7kd/135/
score:0
you can use renderer.image() to add images in any place on chart
score:1
i found a solution by chance because of a logging code i forgot to remove. you can access the data inside the method formatter using "this":
...
plotoptions: {
series: {
datalabels: {
usehtml: true,
enabled: true,
x: -50,
y: -50,
formatter: function(){
console.log(this);
return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
},
}
...
this code surely isn't working, but shows up the idea, doesn't it? hope it helps!
score:9
you can use a trick of having two x-axes, one with images and offset'ed to the top of the chart and one with the usual labels at the bottom:
xaxis: [{
offset: -290,
tickwidth: 0,
linewidth: 0,
categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
labels: {
x: 5,
usehtml: true,
formatter: function () {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}, {
linkedto: 0,
categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
}],
full example on jsfiddle
Source: stackoverflow.com
Related Query
- highchart: add images to top of chart on every column
- Add new series to the top of a highcharts stacked column chart
- Adding images to top of each column for each group on a chart
- Add label to column chart of Highchart
- Add average to highchart dynamically by zoom level for every series on chart
- highchart : Add the series name on the column chart
- How can i reduce gap between legend and chart in highchart of type column where legend is aligned at top without reducing height of chart?
- Highcharts issues in add like 1/10 on top of the column chart
- How to apply borderRadius only for top side of Column or Bar in Highchart
- How to add a background image (pattern) to highchart column graph?
- Customize Stacked column chart in highChart
- Fire click event on a highchart column drilldown chart on clicking x axis for drill down reports
- Highcharts: How to set unique images on top of bar chart serie
- How to dynamically add point placement and point padding in fixed column chart (highcharts)
- I want to add a line to each column in a Highcharts column chart
- How to add Legend in highchart compare stock chart
- How to add a horizontal line in Column bar chart in Highcharts plugin?
- hide a particular column on xAxis highchart Column Chart
- trying to dynamically update Highchart column chart but series undefined
- Highchart / Highstock stack column chart show one series's tooltip at a time
- how to change color of line chart in highchart based on a categorical column in r?
- How to set border in column chart - Highchart
- how to dynamically change column chart to mirror chart using highchart
- Highcharts - position column chart from the top
- How to change tooltip of a column chart programmatically in highchart
- how to add new index Highcharts column drilldown chart
- Highcharts: how to add padding/spacing from top of chart
- Highchart Js Column Chart Stacked and Grouping
- How to add comma in stacked column highchart in indian format?
- highchart column comparison chart like xrange
More Query from same tag
- Styling Highcharts
- highcharts strange area offset error when combined with xrange
- highcharts: Set same spacing between bars
- Highcharts - null values are plotted on stacked area chart, in latest version
- Highcharts Change Bar Background Color Based on categories value
- Replicating a highcharts type
- Highchart bars lower half gets disappeared
- Highcharts - spider web chart questions
- Accessing Highcharts when used with jQuery
- Change the Size of the Export Button In Fusion Chart in PHP
- Highcharts yAxis.max manage tick intervals dynamically
- Is there a better way to (Un)select all LegendItems in HighCharts LineChart?
- How to add html content above series(Chart type - line)
- Highcharts displaying additional information to each bubble points using array
- How to get current level on drilldown event in Highcharts treemap?
- Highcharts xrange-series throws `x is not a function`
- navigator set to full range
- Highcharts - how to show/hide multiple data labels on mouseOver and mouseOut
- set different colors for each column in highcharts
- Highcharts positioning of datalabel for a specific slice
- Hide Highcharts error's in console
- Capturing escape event for Fullscreen in Highcharts
- Highcharts table style in tooltips not working
- Highcharts: highlight selected/active button
- High charts draggable not working for log scale
- Need help on viewing Chart values
- Does Highcharts have a "trend line" feature?
- Highstock Candlestick connect nulls or zero's
- Smooth formula curves in highcharts
- Hide Numbers when category is null