project-nv / night-vision

Highly customizable charting library, created for professional traders
https://nightvision.dev
MIT License
252 stars 58 forks source link

Solved, Broken chart <-- Don't run react in strict mode. #17

Closed frbju closed 2 years ago

frbju commented 2 years ago

Solved. React was in strict mode. Removing that solved it :).

Hi, Iv'e made the move from Vue to this lib instead. For some reason the xAxis moves to the top, any ideas why ?

Using "night-vision": "^0.2.4",

image

Chart code:

// Set the dataset
        chart = new NightVision('test', {

            autoResize: false,
            colors: {
                back: "#1b1b1c",
                grid: "#2e2f3099",
                candleDw: "#0c5b3bff",
                candleUp: "#41a35bff",
                volDw: "#29595555",
                volUp: "#5ba38d3f",
                wickDw: "#0c5b3b88",
                wickUp: "#41a35088"
            }
        });
        chart.data = {
            panes: [
                {
                    overlays: [
                        {
                            name: "APE / Tether US",
                            type: "Candles",
                            main: true,
                            data: [
                                [1648360800000, 13.92, 14.083, 13.5025, 13.92, 10379666.97],
                                [1648364400000, 13.92, 14.2455, 13.871, 14.157, 19149600.5],
                                [1648368000000, 14.157, 14.3755, 14.013, 14.2695, 12874309.69],
                                [1648371600000, 14.2695, 14.2695, 13.9535, 13.9645, 8899211.04],
                                [1648375200000, 13.9645, 14.076, 13.8415, 13.8525, 13092402.18],
                                [1648378800000, 13.8525, 14.029, 13.7325, 13.987, 9720198.64],
                                [1648382400000, 13.987, 14.05, 13.74, 13.74, 9190532.1],
                                [1648386000000, 13.74, 14, 13.56, 13.948, 12672318.36],
                                [1648389600000, 13.948, 14.04, 13.81, 13.838, 6286435.6],
                                [1648393200000, 13.838, 14.17, 13.781, 13.9485, 7569704.26],
                                [1648396800000, 13.9485, 14.0515, 13.78, 13.956, 8794455.91],
                                [1648400400000, 13.956, 14.137, 13.9125, 13.967, 7559702.66],
                                [1648404000000, 13.967, 14.0445, 13.8875, 13.954, 4397620.95],
                                [1648407600000, 13.954, 14.0065, 13.7055, 13.7485, 4905640.1],
                                [1648411200000, 13.7485, 13.9675, 13.6605, 13.9645, 6061252.8],
                            ]
                        }]
                }
            ],
        }
            colors: {
                back: "#1b1b1c",
                grid: "#2e2f3099",
                candleDw: "#0c5b3bff",
                candleUp: "#41a35bff",
                volDw: "#29595555",
                volUp: "#5ba38d3f",
                wickDw: "#0c5b3b88",
                wickUp: "#41a35088"
            }
        });
        chart.data = {
            panes: [
                {
                    overlays: [
                        {
                            name: "APE / Tether US",
                            type: "Candles",
                            main: true,
                            data: [
                                [1648360800000, 13.92, 14.083, 13.5025, 13.92, 10379666.97],
                                [1648364400000, 13.92, 14.2455, 13.871, 14.157, 19149600.5],
                                [1648368000000, 14.157, 14.3755, 14.013, 14.2695, 12874309.69],
                                [1648371600000, 14.2695, 14.2695, 13.9535, 13.9645, 8899211.04],
                                [1648375200000, 13.9645, 14.076, 13.8415, 13.8525, 13092402.18],
                                [1648378800000, 13.8525, 14.029, 13.7325, 13.987, 9720198.64],
                                [1648382400000, 13.987, 14.05, 13.74, 13.74, 9190532.1],
                                [1648386000000, 13.74, 14, 13.56, 13.948, 12672318.36],
                                [1648389600000, 13.948, 14.04, 13.81, 13.838, 6286435.6],
                                [1648393200000, 13.838, 14.17, 13.781, 13.9485, 7569704.26],
                                [1648396800000, 13.9485, 14.0515, 13.78, 13.956, 8794455.91],
                                [1648400400000, 13.956, 14.137, 13.9125, 13.967, 7559702.66],
                                [1648404000000, 13.967, 14.0445, 13.8875, 13.954, 4397620.95],
                                [1648407600000, 13.954, 14.0065, 13.7055, 13.7485, 4905640.1],
                                [1648411200000, 13.7485, 13.9675, 13.6605, 13.9645, 6061252.8],
                            ]
                        }]
                }
            ],
        }`
C451 commented 2 years ago

Do you use codesandbox? It's great + autoformats the code ;)

frbju commented 2 years ago

Sadly i dont, Will create an example once i got my chart working as i want :)