CODEWITHSUNDEEP
chart.jsbar-chart
Deeroy
Deeroy

Reputation: 317

Chart Js invisible horizontal bar

FIXED.

Fixed this issue now. Had a rounded bars function that caused the chart not to display.

When implementing a horizontal bar into my project the bars are invisible. Changing the type to bar makes the code run fine. Any ideas what is causing this?

import React, { Component } from "react";
import Chart from "chart.js";

export default class NewOrdersChartData extends Component {
    NewOrdersChartData = React.createRef();

    componentDidMount() {
        const NewOrdersChartData = this.NewOrdersChartData.current.getContext(
            "2d"
        );

        new Chart(NewOrdersChartData, {
            type: "horizontalBar",
            data: {
                labels: ["Total Orders", "Pending", "Acknowledged", "Completed", "Committed"],
                datasets: [
                    {
                        label: "Test",
                        data: [238, 147, 182, 128, 81],
                        backgroundColor: ["rgba(0, 135, 136)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)"],
                        hoverBackgroundColor: ["rgba(0, 135, 136)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)"]
                    }
                ]
            },
            options: {
                responsive: true,

                legend: {
                    display: false,
                    position: "bottom",

                    labels: {
                        fontColor: "#333",
                        fontSize: 50
                    }
                },
                scales: {
                    //yaxes change
                    yAxes: [
                        {
                            stacked: true,
                            gridLines: {
                                drawBorder: false,
                                display: false
                            },
                            ticks: {
                                beginAtZero: true

                            }
                        }
                    ],
                    //xaxes change
                    xAxes: [
                        {
                            ticks: {
                                display: false
                            },
                            gridLines: {
                                drawBorder: false,
                                display: false,
                                scaleShowLabels: false

EDIT

Fixed this issue now. Had a rounded bars function that caused the chart not to display.

I have nothing else to add.

Upvotes: 1

Views: 161

Answers (1)

Hughesey
Hughesey

Reputation: 448

I had this issue when I was playing around with chart.js. If you have multiple charts in your website this could be a factor in why it's not working. I would make sure none of your custom plugins are affecting this.

Such as datalabels, rounded bars etc..

I fixed this by removing my custom plugins.

Upvotes: 1

Related Questions