score:3
Depending on what you want to display, it should be possible. The bubble charts will allow the same options as any other highcharts. The easiest way is to use dataLabels http://api.highcharts.com/highcharts#plotOptions.scatter.dataLabels
dataLabels:{
enabled:true
}
If that isn't flexible enough for you, it is possible to draw whatever you want on the chart using the underlying renderer http://api.highcharts.com/highcharts#Renderer. This is a bit harder, but. Fairly straight forward once you get the hang of it.
I've created a small example using datalabels here :http://jsfiddle.net/4nRk6/
Datalabels can be customised with a formatter function, for example:
dataLabels: {
enabled: true,
formatter: function() {
return this.y +'mm';
}
}
The full documentation is here: http://api.highcharts.com/highcharts#plotOptions.column.dataLabels
If you want extra information on the bubbles, you may need to format your data series as follows:
[
{x:1, y:5, bubbleText:"Bubble 1"},
{x:2, y:15, bubbleText:"Bubble 2"},
{x:3, y:5, bubbleText:"Bubble 3"}
]
Inside your dataLabel, you can then reference this.point.bubbleText as well as this.x and this.y.
score:14
There are two things you need to do.
First, name each data point (bubble):
data: [ { name: 'Alice', x: 3.5, y: 4, z: 5}, { name: 'Eve', x: 7, y: 7, z: 3}, { name: 'Carol', x: 4, y: 8, z: 6} ]
Second, create a data label formatter:
dataLabels: { enabled: true, formatter: function() { return this.point.name; } }
You can see this in action here: http://jsfiddle.net/franzo/JuGDp/1/
Bob's your uncle.
Source: stackoverflow.com
Related Query
- Highcharts naming of individual bubbles
- HighCharts : Is it possible to customize the colors of individual series?
- Customizing the colors of individual series in HighCharts
- Color individual markers on hover in Highcharts
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts - Global configuration with common code and unique data & Headings
- HIghcharts individual plot point color
- Individual point color in highcharts scatterplot
- Is there any way to fill bubbles partially in highcharts bubble chart?
- Highcharts hide connected line between individual points
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
- Highcharts - bubble diagram need smaller bubbles infront of bigger
- HighCharts Stock Chart error code 18
- Highcharts - Bubble chart - Proportional bubbles
- highcharts change rendered image source on click
- How do i add mouse wheel code in Angular2 highcharts in typescript
- how to display 2 same highcharts without duplicate the code
- Use of DotNet HighCharts dll to make charts in code behind
- How to edit tooltip in Highcharts C# code
- what means ${demo.css} in example files of highcharts ? That piece of code seems to be literal
- Highcharts change symbol and hover text of individual points Line Chart
- Highcharts - prevent large marker from overflowing axes - my bubbles are escaping =(
- passing json values to highcharts from .net code behind
- how to use highcharts tooltip formatter in python code
- passing formatting JavaScript code to HighCharts with JSON
- Highcharts Polar Chart Manually setting individual slice widths
- Highcharts display label for pie chart using html table as data source
- Simple, Open source PHP wrapper for Highcharts library
- Creating a responsive accumulated rain chart from a series containing individual rain fall data using Highcharts
- Add Source to Highcharts Export CSV
More Query from same tag
- Highcharts column category in X-axis using different Y-axis
- adding click event dynamically created highchart
- Is there a style to apply that allows the legend to style each series as a button?
- Optimal display for overlapping series in a line chart
- highcharts y-axis title wrap
- Alias "ext.highcharts.HighchartsWidget" is invalid error in yii highchart
- Change chart subtitle programmatically
- trying to draw dotted lines over the chart
- Show Series and colorAxis both in Legend
- How to display array in array on Highcharts? [JS]
- TypeScript insert record to multi dimension array ( Eg - Array< number | [number, number] | [string, number] )>
- Highstock clipPath calculation bug
- Hide data labels of a HIChart's Pie chart using Swift 5.0
- Hide Highcharts error's in console
- Change in highcharts version breaks animation of elements
- Allowing some padding space in polar charts using Highcharts
- Filtering through highcharts series data array
- react-highcharts alignThreshold
- Highcharts pie chart height auto sized including legend
- Highcharts longshot, Set stylistically different gridLines for weekends..?
- In a multiple column layout my highchart is not visible in Safari
- Render from/to areas in Highcharts line chart
- angular2-highcharts x axis moves up on drilldown
- HighCharts is not defined
- Highcharts Stack Column Sum Positive and Negative Together
- Highcharts. How to set interval for PlotBand?
- How to add secondary y-axis to highcharts
- How can I create a chart with stacked columns after drilldown?
- (angular2-highcharts) ERROR in Error encountered resolving symbol values statically
- highchart.. browser stop working on loading a chart