score:4
In the data
array you can specify options for a particular point (such as a custom marker to show):
[...]
series: [{
name: 'Tokyo',
marker: {
symbol: 'square'
},
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, /* HERE >>> */{
y: 26.5,
marker: {
symbol: 'url(/demo/gfx/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
},
[...]
Anyway I don't think is possible to put the marker over the chart element.
score:11
You can use two series, first column, and second scatter with customised marker.
Example: http://jsfiddle.net/NDpu6/
series: [{
name: 'Tokyo',
type:'column',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
type: 'scatter',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
score:16
I had a similar challenge, where I needed to place specific icons on top of my columns:
To achieve this, I used the formatter
callback:
plotOptions: {
column: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/path/to/special/icon"></div></div>';
},
y: 0
}
}
}
As you can see, you could then dynamically set an image path or element class based on whatever your x/y/series/point/total/percentage value is.
Finally, you also will need to increase the maxPadding
for the yAxis
, otherwise the icons/values will be cut off (depending on the icon size, obviously).
To see it in action with some 'dynamic' placeholder pictures, have a look at this jsFiddle: http://jsfiddle.net/DMCXS/
Source: stackoverflow.com
Related Query
- Highcharts: Show special marker on column chart
- highcharts special marker on column chart
- Column Chart Show datalabel for null values - Highcharts
- Highcharts column chart histogram show x range in tooltip
- Highcharts column chart extends off container and doesn't properly show X axis
- Show Column and line chart together in drill down using highcharts
- How to create a column range chart in Highcharts using range and navigator functions?
- Displaying percentage in Y-axis of Highcharts column chart
- Highcharts : Change opacity of a column chart
- How to show a column with the value Zero in Column chart in Highcharts?
- highcharts jquery dynamic change chart type column to bar
- Show tooltip of a column chart programmatically in StockChart (highchart)
- Can highcharts crosshairs show on top of area chart fill?
- Highcharts Column chart with drilldown, remove hyperlink like formatting from x-axis labels
- Highcharts - column chart redraw animation
- Hide 0 values in Stacked Column Chart in Highcharts
- Show value of last point as label or tooltip on Highcharts Stock Chart
- Make Highcharts border color match background color on column chart
- Show HighCharts tooltip when chart loads
- HighCharts - Show tooltip on column where value is 0 or null
- Show more data on Gauge chart with Highcharts
- highcharts / highstock column doesn't show all datalabels
- Color each point individually in column chart highcharts
- Highcharts Grouped Column Chart with Multiple Groups?
- highcharts - precision for stacked column chart data labels
- HighCharts area graph - show tooltip only on hover of marker
- Highcharts - Column chart customization
- Highcharts - Remove first marker from Area chart in every series
- Highcharts chart doesn't show in jquery dialog
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
More Query from same tag
- Highcharts date not working
- Highcharts column w/ overlapping goal
- highcharts not loading in tabs
- Is there a way to set Highchart options dynamically?
- Highcharts - Stack Chart to Stack Chart in Drilldown
- Convert html 5 to PDF in MVC 3
- dynamic multiple series from different CSV-files
- Highchart with label in custom intervals
- Multiple xAxis line on Highcharts
- Custom Drill No Longer Functioning
- Highcharts - Enable border for 1 column/bar only?
- Highchart Annotation Scroll
- HighStock navigator from a stacked area chart shows wrong series
- Parsing JSON using jQuery's each from array of arrays
- Need legends in high chart to be square shape
- Import Highcharts module SvgRenderer failed
- Highcharts: Hide/remove values (in a range) from y axis
- Highcharts chart width issue on lazy loading of stylesheet
- Day vs Time on Scatter plot
- Adding dotnet highcharts to Xamarin app
- Handling axis scale change when a legend item is clicked & hidden
- Show only month labels on HighChart xAxis
- Highcharts set slice size of pie chart
- Highcharts navigator not working with data set
- Populating data to Highstock
- Draw charts with a Loop using HighCharts in symfony
- Highcharts don't show small series
- Highcharts returning error 14
- Highchart multiple level drilldown click event get drilldown series data
- How to show plot lines in the legend in Highcharts?