Chart JS is not showing data

user_9437674 0
Viewed 1245

Hey guys I made bar chart with some data and when I look on it, it shows only 1st bar and second is down...and no idea why. Tried to change data and nothing happen still...so data doesn't matter and I watched docs and didn't find anything wrong

var optionsTwo = {
  type: 'bar',
  data: {
    labels: ["Label1", "Label2"],
    datasets: [{
        data: [45000],
        label: "Label",
        backgroundColor: "#3e95cd",
        
      }, { 
        data: [40000],
        label: "Label2",
        backgroundColor: "#8e5ea2",
        
      }, ]
  },
  options: {

        legend: {
            display: true,
            position: "bottom",
            labels: {
                fontColor: 'rgb(0, 0, 0)'
            }
        }
    }
}
var ctxOne = document.getElementById('bar-chart').getContext('2d');
new Chart(ctxOne, optionsTwo);
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
        <div class="chart-second" style=" height: 80vh; margin: 0 auto;">
          <div class="chart-wrapper">
            
            
            <canvas id="bar-chart"
              width="400"
              height="400"
              aria-label="Chart"
              role="img"
              
            ></canvas>
          </div>
         
          </div>

charts html javascript
1 Answers

Heres the working code.

var optionsTwo = {
  type: 'bar',
  data: {
    //labels: ["Label1", "Label2"],
    labels: ["the labels"],
    datasets: [{
      data: [45000],
      label: "Label 1",
      backgroundColor: "#3e95cd",

    }, {
      data: [40000],
      label: "Label 2",
      backgroundColor: "#8e5ea2",

    }, ]
  },
  options: {

    legend: {
      display: true,
      position: "bottom",
      labels: {
        fontColor: 'rgb(0, 0, 0)'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}
var ctxOne = document.getElementById('bar-chart').getContext('2d');
new Chart(ctxOne, optionsTwo);
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="chart-second" style=" height: 80vh; margin: 0 auto;">
  <div class="chart-wrapper">


    <canvas id="bar-chart" width="400" height="400" aria-label="Chart" role="img"></canvas>
  </div>

</div>

user_64890660
Related