Width paramater is broken

[richandcreamy]

On line 15 and 16 I added title and color but can't get it to appear.

https://github.com/HTTP-Warriors/Stock-Byte-App/blob/master/app/javascript/components/Pages/chart.js

import React from "react"
import KaktanaChart from 'kaktana-react-lightweight-charts'

class Chart extends React.Component {

    render () {
            const { chartData } = this.props
            let lightChartData = chartData.map((element)=>{
                return ({ time: element.date, value: element.close })
                })
        return (
            <>
                <KaktanaChart
                    options = {{
                        lineStyle: 1,
                        lineWidth: 1,
                        crosshairMarkerVisible: true,
                        crosshairMarkerRadius: 6,
                        lineType: 1,
                        alignLabels: true,
                            localization: {
                                dateFormat: "yyyy/MMMM/dd",
                                priceFormatter: function(price) {
                                    // add $ sign before price

                                    return '$' + price;
                                    },
                                },
                            grid: {
                                vertLines: {
                                    color: "#E0B64A",
                                    style: 1,
                                    visible: true,
                                },
                                horzLines: {
                                    color: "#E0B64A",
                                    style: 1,
                                    visible: true,
                                },
                            },
                            priceScale: {
                                position: 'right',
                                mode: 1,
                                autoScale: true,
                                invertScale: false,
                                alignLabels: true,
                                borderVisible: true,
                                borderColor: "#E0B64A",
                                scaleMargins: {
                                    top: 0.30,
                                    bottom: 0.25,
                                    },
                            },
                            crosshair: {
                                vertLine: {
                                    color: "#E0B64A",
                                    width: 1,
                                    style: 0,
                                    visible: true,
                                    labelVisible: false,
                                },
                                horzLine: {
                                    color: "#E0B64A",
                                    width: 1,
                                    style: 0,
                                    visible: true,
                                    labelVisible: true,
                                },
                                mode: 1,
                            },
                            timeScale: {
                                rightOffset: 0,
                                barSpacing: 30,
                                fixLeftEdge: true,
                                lockVisibleTimeRangeOnResize: true,
                                rightBarStaysOnScroll: true,
                                borderVisible: true,
                                borderColor: "#E0B64A",
                                visible: true,
                                timeVisible: true,
                                secondsVisible: false
                            }
                        }}
                    lineSeries =  
                    {[{
                        data: lightChartData
                    }]}
                    height = {320}
                    width = {640}
                />
            </>
            );
        }
}
export default Chart

[AurelReb]

Hi, it seems the width parameter is broken. Try using autoWidth parameter instead, placing the KaktanaChart component into a <div style={{width:640}}> component.

Please refer to the example below:

[AurelReb]

Also, it appears you are trying using line options in the global options like lineWidth. You should include them in the lineSeries options:

let lineSeries = [{
  data: [...]
  options: {linewidth: 1}
}]

All the specific-lineSeries options are available here: https://github.com/tradingview/lightweight-charts/blob/master/docs/line-series.md#customization

[richandcreamy]

Thanks! I'll try it in class tomorrow, got to do some hw tonight.

[AurelReb]

I added documentation for all the wrapper props/features in the Readme. I think it will be easier to achieve anything you want now :)

[richandcreamy]

I'm still playing with this and are about to present soon but I wanted to thank you for updating the Readme.

[AurelReb]

You're welcome :) I keep the issue open as the width prop is currently broken. I will close it when I fix it.

[richandcreamy]

Alright! I updated the bug title for you :D