Issue whille integrating packedbubble in react-highcharts
Tarunkumarchelumalla opened this issue · comments
Issue whille integrating packedbubble in highcharts-react-official
do we have a separate paid packedbubble module in highcharts-react-official
Thank you for contacting us!
For performance reasons, Highcharts is split into modules, but they are included in the main license.
As specified in the API, packedbubble series type requires highcharts-more module, so you need to import and initialize it:
import Highcharts from 'highcharts';
import HCMore from 'highcharts/highcharts-more';
HCMore(Highcharts);
Live demo: https://stackblitz.com/edit/react-balrr8
API Reference: https://api.highcharts.com/highcharts/series.packedbubble
Docs: https://github.com/highcharts/highcharts-react?tab=readme-ov-file#how-to-add-a-module
Best regards!
@ppotaczek https://660a5ce0079846652ed9c8d9--darling-starship-b4631a.netlify.app/
why my packed bubbles are not visible in netlify it was working in local
@Tarunkumarchelumalla, I don't have access to your code so I can't check what's causing the problem. Please add more details about your configuration.
There is an empty chart without errors in the browser console, so maybe there is some problem with data?
@ppotaczek https://6617bff01d46877c5f77cbd7--spontaneous-muffin-0f0a3c.netlify.app/
how can i set bubbles size automatically occupy the rest of the space and not to be congested more like this
i have tired adjusting based on min max size
currently minsize is 20% maxSize is 150% it looks spacy if i keep minSize 50% max to 150% then it gets congested here
`const [chartOptions, setChartOptions] = useState({
chart: {
type: "packedbubble",
height: calculateHeight(),
backgroundColor: "#000001a"
},
boost: {
allowForce: true,
enabled: true,
pixelRatio: 1,
seriesThreshold: 50,
useGPUTranslations: false,
usePreallocated: false
},
title: {
text: ''
},
tooltip: {
enabled: false
},
credits: {
enabled: true
},
plotOptions: {
packedbubble: {
minSize: props.minSize || '50%',
maxSize: props.maxSize || '100%',
opacity: 1,
showInLegend: false,
label: {
enabled: false
},
point: {
events: {
click: function handleClick(event) {
console.log(event)
},
}
},
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: '0',
enableSimulation: true,
bubblePadding: 20,
initialPositions: 'random'
},
states: {
hover: {
enabled: false
},
select: {
animation: {
animation: 300
},
enabled: true,
}
},
dataLabels: {
enabled: true,
useHTML: true,
jitter: false,
allowOverlap: true,
formatter: function (): any {
return (
`<div class='container ${props.customClass ? props.customClass : null}' id=${this.point.id} style='position:absolute; top:0'>
<div>${'$' + this.point[props.copyTextKey].toUpperCase()}
</div>
<span style='font-size:${calculatePercentageText(this.point)}' >${showPointName(this.point) ? this.point[props.MainTextKey] + '%' : ''}</span> <span style='font-size:${calculateFontSizeSubText(this.point)}'> ${showPointName(this.point) ? '(' + this.point['this_period_mentions'] + ')' : ''}</span>
</div>`
);
},
style: {
fontFamily: 'Poppins',
fontSize: '1.2em'
}
},
},
},
series: [
{
data: props.data,
marker: {
fillColor: null,
lineWidth: 2,
lineColor: null // inherit from series
},
},
],
});
`
Hello There!
In general, there's no one API property you can use, but a similar effect may be achieved by overriding the setCircularPositions method. Kindly take a look demo. You'll probably need to slightly adjust this to your project/operate over other algorithm options but I think this is the closest to what you'd like to achieve.
Alternatively, you can calculate the minSize and maxSize properties dynamically (preferable on the initial chart's load, demo).
Also, you can try to disable the useSimulation property, demo.
Kind Regards!
is there a way to add animations to the bubbles like this https://jsfiddle.net/BlackLabel/6vr2usbh/ for packed Bubbles
easing fucntion is not wroking on bubbles @KamilKubik
@Tarunkumarchelumalla Yes, as I can see all you have to do is add the value property to the newly created points, like this: https://jsfiddle.net/BlackLabel/q42d9pog/.
If you don't provide it, the points will be considered null values, and the graphic property won't be created, so the function inside the render method will fail - it seems to be a key difference between these series types, because the value property is required to properly display the packedbubble series points.
Regards!
@KamilKubik I want to acheive this bubble animation shown in this chart https://jsfiddle.net/BlackLabel/6vr2usbh/ in packed bubbles like growing bubble from 0% to 100% is there any way of acheiving that with smoothness
Tarunkumarchelumalla Thanks for the clarification, I get your point now, but unfortunately, there's no straightforward way to achieve it and keep the built-in layout algorithm. All you can do is disable the useSimulation property to see this animation but in favor of losing the mentioned functionality as described here.
Regards!
@KamilKubik Thanks for clarification
I have an issue when I drag those bubbles some how at the edge bubbles leave the chart area. Like if you force bubble you can drag them a make them leave the chart area
Tarunkumarchelumalla Since several demos have already been mentioned in this thread (I can't see this problem in those), could you provide me with one where the issue is visible/reproducible so I can debugg it?
Regards!
check this https://jsfiddle.net/eharn7b0/ you can drag bubbles outside the chart area
look at that bubble on the left
Tarunkumarchelumalla Thanks for sharing this!
I'd classify it as a feature request to the core HC source code you can report here describing the whole issue.
Nevertheless, you can try to disable the clip property on a series as a potential workaround.
Regards!