Curve in D3 shape - reactjs

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

Related

Does Recharts have anything that looks like this?

Does anyone know any js chart api's that have something like this or anny workarounds within recharts to implement this. Can't find anything useful in the documentation except radial bar charts but the way it is implemented is such that the biggest value it draws is a full ring, so plotting only a single value will always have a full ring instead of a changing percentage like i want?

Is there a way to alter the edges of a step line chart in chartjs?

I am currently attempting to alter a chart in chartjs which is a step line chart. Currently the edges are very jagged, as they are a perfect 90 degrees. What I want to achieve is a slight radius to smoothen the edges out, so there is a bit more flow. I have not really found any suggestions nor plugins to alter a charts edges, so does anyone have any possible solutions?
The current stack im in uses react with typescript.
This is what I wish to achieve:
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 ;)

Irregular Polygon

Take a look at the attached pic, I need to mimic the grey irregular polygon header at the top of the form. If it wasn't for the angled portion on the right-hand side, it would be straightforward. What is the best method to create it? Can this be created in XAML? Should I use an image? Any pointers are greatly appreciated.
This can easily be done via the standard drawing capabilities in XAML. See Shapes and Basic Drawing for details on making custom shapes.

Draw bar chart in windows application using c#

I want to draw a bar in +ve and -ve direction in chart. Like a line at the Middle of the chart and bar are in both the direction.
Please suggest me how I can draw chart in C#.
You can use ZedGraph . It can do a lot of charting stuff. Here you can find samples, there are some bar samples there.
I used it, it's realy easy way to create any chart with this library.

Resources