javascript - Chart with top rounded bars and average line in react native

Question

I want to create charts displayed in the image below.

whenever I will click a particular bar value list value, should get highlighted bar top corner should be rounded need to display average line over the bars in dashed view

I'm not able to find suitable lib with same design pattern.

Please see the design in the link

Answer 1

for rounded view you have to give a style. I guess it will work.

   style={{
      margin: 10,
      height: 200,
      width: 20,
      borderTopRightRadius: 10,//for rounded curve
      borderTopLeftRadius: 10,// for rounded curve.
      backgroundColor: "blue"
    }}

I made a demo please have a look,