forked from highcharts/highcharts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
whats-new.htm
49 lines (32 loc) · 3.08 KB
/
whats-new.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<title>What's new in Highcharts 3.0</title>
<h2>Bubble series</h2>
<p>A bubble series is a three dimensional series type where each point renders an X, Y and Z value. Each points is drawn as a bubble where the position along the X and Y axes mark the X and Y values, and the size of the bubble relates to the Z value.</p>
<h3>Bubble size</h3>
<p>The size of the bubbles is controlled by the <a href="http://api.highcharts.com#plotOptions.bubble.minSize">minSize</a> and <a href="http://api.highcharts.com#plotOptions.bubble.maxSize">maxSize</a> options. These options can be given as either pixels or percentages, where the percentage relates to the plot area size. When multiple bubble series are present in the same chart, the bubble sizes are computed from the combined points.
<pre>
minSize: 8, // pixel value
maxSize: '20%' // percentage value
</pre>
</p>
<h3>Bubble color</h3>
<p>By default, the bubbles' line (border) color is inherited from the <a href="http://api.highcharts.com#plotOptions.bubble.color">series.color</a> option, and the fill is the series.color with a default opacity of 0.5. These values ensure that overlapping bubbles are clearly visible. For customization the <a href="http://api.highcharts.com#plotOptions.bubble.lineColor">lineColor</a> and <a href="http://api.highcharts.com#plotOptions.bubble.fillColor">fillColor</a> can be set independently.</p>
<p>A common application of the fill color is to apply a radial gradient to give the impression of 3D bubbles floating in space. This can be done by setting the <code>fillColor</code> option to a radial gradient:
<pre>
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(69,114,167,0.5)']
]
}
</pre>
See <a href="http://www.highcharts.com/sample/plotoptions/bubble-radialgradient/">radial gradients demonstrated</a>.
</p>
<p>Additionally, negative bubbles can be given a separate color.</p>
<h3>Negative Z values</h3>
<p>Negative Z values can be optionally shown or hidden by the <a href="http://api.highcharts.com#plotOptions.bubble.displayNegative">displayNegative</a> option. If shown, they can be given a specific color by <a href="http://api.highcharts.com#plotOptions.bubble.negativeColor">negativeColor</a>. The threshold for what is negative can be set using <a href="http://api.highcharts.com#plotOptions.bubble.zThreshold">zThreshold</a>. See <a href="http://www.highcharts.com/sample/plotoptions/bubble-negative/">negative bubbles</a> demonstrated.</p>
<h3>Data labels</h3>
<p>By default, data labels for bubble series are placed on top of the bubbles by setting the <code>align</code> option to <code>"center"</code>, <code>verticalAlign</code> to <code>"middle"</code>
and <code>inside</code> to <code>true</code>. In the <code>dataLabels.style</code> option, the labels are given a default color of "white", and in modern browsers a black text shadow to make it stand out from the background. See <a href="http://www.highcharts.com/sample/plotoptions/bubble-datalabels/">bubble data labels</a> demonstrated.</p>
<h2>Box plot series</h2>
See docs