Search code examples
javascriptpythondjangochartsapexcharts

Chart in javascript doesn't change color

I have a problem in javascript with building financial candlestick charts. I made a chart with apex.js and it displays the correct data where it should be but the color of the chart doesn't change, when the stock price is going up candlestick should be green when it goes down it should be red but on some stocks candlestick in always red and on some stocks it works fine. Here are the images, both charts use the same code but different data because it's different stock but that doesn't mean it should be displayed like this. enter image description here

enter image description here

Here is code for chart:

<div id="chart">

    </div>
    <script>

        var options = {
            series: [{
                name: 'OHLC',
                data: [
                    {% for stock in stocks %}          
    {
                x: new Date("{{stock.date}}"),
                y: [Number("{{stock.open}}"), Number("{{stock.high}}"), Number("{{stock.low}}"), Number("{{stock.price}}")],
            },
            {% endfor %}
            ]
        },
    ],
        chart: {
            type: 'candlestick',                     
        },
        title: {
            text: '{{ticker}} Stock ',
                align: 'center'
        },
        yaxis: {
            tooltip: {
                enabled: true
            }
        }
    };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>

I am using Django in the backend so here is a function that returns chart data:

@login_required(login_url='stock:login')
def chart(request, ticker):
    stocks = Stock.objects.filter(ticker = ticker).order_by('date')
    context = {'stocks':stocks, 'ticker':ticker}
    return render(request, 'stock_app/chart.html', context)

I am struggling with this for a few days and didn't even make slight progress, can anyone help me or at least tell me where the issue could be I would be really thankful. I check the database, data, and code, switched a few services, and used chart.js, plotly, and a few others and it's always the same issue. I also checked data on yahoo finance for stocks that are not displayed correctly and data is correct.

Solution

  • Thanks to everyone who tried to help I found out what was the problem. The close price was misconfigured by the API provider so the close price was higher by a few cents than the low price which caused the error