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
- Adding HighCharts Data Series With Property Names
- How to set reset zoom button and title to exactly center of the high charts
- How to add negative area or background for a specific bar or pie chart in highcharts?
- High charts queue chart updates after ajax with multiple charts in firefox
- HighCharts: Getting Y-Value in One Series Based on X-Value From Another Series
- "Extend" highcharts chart add properties and functions, prototype
- Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue
- Highchart - Dual Axes Line chart issue
- Angular 4 - Create Heat Chart
- pointStart and pointInterval does not work
- How do you put the datetime in the guage chart in human readable format
- Highcharts replacing column/tooltip label
- Include nested entity details but don't group by then when grouping by other fields
- Highlight slice of a pie chart in highcarts
- Uncaught TypeError: Cannot read property 'timestamp' of undefined
- Highstocks(compare chart) input data without using getJSON
- Highstock v3.0 how to disable tooltip timeout/delay
- PIE CHART - Data Visualization With DataTables and Highcharts
- Modify dataGrouping in Highcharts
- How do I add a dropdown to change endRow value in a chart displaying date from an HTML table
- Highcharts show tooltip on load with table datasource?
- MongoDB aggregation by time interval PHP
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- HighCharts Bullet Chart display data label of the target
- highstocks x-axis time incorrect
- Keeping x axis at bottom of highchart
- How to make the highchart fully occupied with the div that had set?
- Highcharts not displaying data labels for Pie chart in arabic
- Highcharts give me black image
- Drilldown Highmaps for Australia