React wrapper for lightweight charts

[AurelReb]

Hi,
I would like to inform you I made a react wrapper for your lib.
It's still in development, and all the methods are not available yet. However, I think it can be useful to many people to implement your chart lib quickly in their react app.
Here is the GitHub link: https://github.com/Kaktana/kaktana-react-lightweight-charts
It's not published on npm yet as I would like to ask you the permission to publish it :)

Also, if you have requests for the wrapper, please let me know so I can achieve this.
Thanks

[AurelReb]

Also, I added some options as autoWidth and autoHeight allow the chart to resize automatically with 100% of the width/height of his container if enabled. Also, I added a default color palette for multi-line charts so each line is clear without setting a different color manually.
Maybe these options could be added to the original library?

[richandcreamy]

Thanks for creating the wrapper! I'm using your wrapper in a student project and could not get the chart to render in the desired area on page without it. Are only some options availble when using it? I can't seem to get line color to come through.

[AurelReb]

Thank you for the support :)
Don't hesitate to open issues on the wrapper repo if related to it!
I added some useful options to the wrapper as a legend handler, an auto-color assignment to multi-series charts, etc.
What do you mean by cannot seem to get line color to come through?

I will add a complete doc to the wrapper as well as examples in a few days.

[richandcreamy]

Ok! I'll add to your repo.

[IbrahimSam96]

@AurelReb would you be able to help how to do the autosize using the orginal library in react? I would really appreciate your help

Thanks

[AurelReb]

@IbrahimSam96 what do you mean on the original react library?

[IbrahimSam96]

I would like to create a responsive lightweight-charts without the wrapper. Here is a snippet of my code

const  LivePortfolioGraph = (props) => {

const ayre = useRef(null);


const { width, height } = useResizeObserver({ ref: ayre.current });

useEffect( ()=> {


const chart = createChart(ayre.current, {
        width: width,
        height: height,
 .........
});



var areaSeries = chart.addAreaSeries({
topColor: 'rgba(38, 198, 218, 0.56)',
bottomColor: 'rgba(38, 198, 218, 0.04)',
lineColor: 'rgba(38, 198, 218, 1)',
lineWidth: 2,
crossHairMarkerVisible: false,
});

areaSeries.setData([
                    { time: '2018-10-19', value: 26.19 },
                    { time: '2018-10-22', value: 25.87 },
                    { time: '2018-10-23', value: 25.83 },
                    { time: '2018-10-24', value: 25.78 },
                    { time: '2019-04-22', value: 26.00 },
                    { time: '2019-04-23', value: 26.06 },
                    { time: '2019-04-24', value: 26.00 },
                    { time: '2019-04-25', value: 25.81 },
                    { time: '2019-04-26', value: 25.88 },
                    { time: '2019-04-29', value: 25.91 },
                    { time: '2019-04-30', value: 25.90 },
                    { time: '2019-05-01', value: 26.02 },
                    { time: '2019-05-02', value: 25.97 },
                    { time: '2019-05-03', value: 26.02 },
                    { time: '2019-05-06', value: 26.03 },
                    { time: '2019-05-07', value: 26.04 },
                    { time: '2019-05-08', value: 26.05 },
]);

var legend = document.createElement('div');
legend.classList.add('legend');
ayre.current.appendChild(legend);

var firstRow = document.createElement('div');
firstRow.innerHTML = 'GAV';
firstRow.style.color = 'white';
legend.appendChild(firstRow);


}, [ayre] )



return (

<div style={{position:"relative", width:"100%", paddingBottom:"50%"}}>
<div ref={ayre} style={{position:"absolute", height:"100%", width:"100%",bottom:"0px", left:"0px"}} />
</div>



)

}

export default LivePortfolioGraph;