HighCharts bubble charts customization - reactjs

Do you have any solution on how to add additional functionalities to highcharts bubble chart in react like this one bubble chart?
I need a stoke/circumference around each bubble it has two segments success in white and failure in red those values comes from series data of each point?
I tried some approaches but no luck.
Could you please guide us on how to achieve this?
another requirement is there any option to disable bubbles i.e no hover and select functionalities for particular bubbles
thanks

Related

Chart.js Radar Chart how to add custom tooltip a non-point location

I have a pretty basic radar chart and its working as it should.
Now I'm wondering if there is a way to add tooltips that use the default styling but for non-point coordinates, such as the centre position.
I would like to re-use the built in tooltips to benefit from styling and transitions without having to built a custom onHover overwrite.
So I would like to specify x and y coordinates in which the tooltip should show up and then the text that should be displayed. Some kind of callback would work I assume.
I suppose I could add a dataset which has all 0 values and add a custom tooltip to that, but that's not quite exactly what I am trying to achieve here.
Does Chart.js support this? I couldn't find it in the specs nor on stack overflow.
Thanks in advance!

Drawing a bar chart in the background of candlestick chart in apexchart

I am playing with candlestick graphs (example from here: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/) everything work as expected.
However, I am struggling with adding my signal data for a visual representation of the graph.
I am unable to find a solution that works I was thinking I can somehow fine-tune a timeline - I tried chart.js/apexcharts and for now, I believe the closest will be with the second framework.
What I need is a bar chart that can be used in numeric ranges for the X and Y-axis as presented below. (the goal is to be able to add the green bar as presented)
Is there an easy win or an idea of how to approach this?
Is there something I am missing?
That is my current solution (line graphs with stopWin/stopLose and entry price).
Still suboptimal - but works and is easy to achieve.
After weeks of playing around with it - the solution stayed:
I got two instances of apexcharts one with candlestick and one with line graphs
they are in a single div with CSS playground and position absolute.
I am passing standardised min/max values and has to have the same amount of elements in them (line graphs are allowing You to add null values which allow using this solution.
The final version work is repeatable and looks good.
if you need some help in similar case - feel free to reach out ;)

Selecting a Range on the X-Axis in Recharts

I'm trying to reproduce the Airline on-time performance crossfilter demo in React. We're using Recharts. One feature is the ability to drag a selection window across a bar chart. Is this possible in Recharts?
Looks like there's an example on the Recharts page for line charts. It involves the chart's mouseMove, mouseDown, and mouseUp event handlers.
I think the op is looking for a slider solution something like this on bizcharts its a very common thing to have on charts and think it will be valuable to have something simular on recharts

Curve in D3 shape

I tried creating a funnel chart using D3 and vx. This is what i have achieved so far
https://www.webpackbin.com/bins/-L-TDMSWHUS-ZOi0jb8t
But i tried all curve options from d3-shape. But couldn't create the cure as shown in
Any help would be appreciated.
Seems like your best bet would be to make a basic area chart and to reflect it across the x-axis. I believe that would give a similar effect. For more clarification, the x-axis would go through the horizontal center of the chart in the image above

Curving chart diagram

My goal is to have a diagram which look like this
Each arrow should be a one dimensional chart, where point are displayed (colors and point size depends on some values)
I'm building my own chart system because I spent a few hours looking for one which allow to custom markers (size and colors, and maybe even shape) but I couldn't find one.
Actually the only one I found is dynamic data display 2.0 which is only proposed in Silverlight.
My biggest problem is the two curving chart I have to do at the top of the diagram.
I tried to use PathListBox control, but because it's a listBox, I couldn't display items at fixed X position (like using a chart).
I'm not asking for a full perfect solution, but can someone give me advices, or clues ?
How would you manage to do something like that ?
It should only be a XAML work here, because all the data are already ready in a ListCollectionView (i'm using MVVM).
Thank you !

Resources