Min_Max Size of bubble chart HTML5

<p>Hello,</p>
<p> </p>
<p>i want to change the minimum and the maximum size of a bubble in a HTML5 bubble chart.</p>
<p> </p>
<p>I already use this script to change the color of the bubble depending of his size, if it can helps.</p>
<blockquote class="ipsBlockquote">
<p> </p>
<p>beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex, seriesOptions, series )</p>
<div>{</div>
<div>//You can change pointOptions here to modify data, color and y.</div>
<div> </div>
<div>if (point.z == 0.301)</div>
<div>pointOptions.fillColor = "#FFFF00";</div>
<div>else if (point.z == 0.302)</div>
<div>pointOptions.fillColor = "#DDC22F";</div>
<div>else if (point.z == 0.303)</div>
<div>pointOptions.fillColor = "#0088CA";</div>
<div>else if (point.z == 0.304)</div>
<div>pointOptions.fillColor = "#6FD0FF";</div>
<div>else if (point.z == 0.3)</div>
<div>pointOptions.fillColor = "#CADBDA";</div>
<div>},</div>
</blockquote>
<p> </p>
<p>Because as you can see from the screenshot as attached file, </p>
<p>when i change the size of my bubbles, the big one (SI09) doesn't change, but the littles one do, depending of the size between each other.</p>
<p>And i need to lower the size of the maximum.</p>
<p> </p>
<p> </p>
<p style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">I really appreciate any help you can provide,</p>
<p style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">with regards,</p>
<p style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">Jonathan</p>

Find more posts tagged with

Comments

Clement Wong

<p>Have you tried using maxSize? Docs @ <a data-ipb='nomediaparse' href='http://api.highcharts.com/highcharts/plotOptions.bubble.maxSize'>http://api.highcharts.com/highcharts/plotOptions.bubble.maxSize</a></p>
<pre class="_prettyXprint">
beforeGeneration: function(options)
{
   options.plotOptions= {
       bubble: {
           minSize: 20,
           maxSize: 40
       }
   };
},</pre>
<pre class="_prettyXprint _lang-">
beforeGeneration: function(options)
{
options.plotOptions= {
bubble: {
minSize: '20%',
maxSize: '40%'
}
};
},
</pre>
<p>jsFiddle:</p>
<p><a data-ipb='nomediaparse' href='http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bubble-size/'>http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bubble-size/</a></p>
<p> </p>
<p> </p>
<p>Attached is an example.</p>

Neojet

<p>Perfect, i get it now.</p>
<p> </p>
<p><span style="color:rgb(40,40,40);font-family:'Source Sans Pro', sans-serif;">Thank you very much Clement !</span></p>