Chartjs-Chart.js showing x-axis ticks even though set to false

by

1👍

✅

  1. you have a problem with your spelling .. It should be Axis not Axes

  2. there is no need for square brackets: xAxes: [

  3. I have cleaned up spare commas — While they don’t "hurt" the JS, they are unnecessary.

const prices = [
  [1483315200000, 1019.1988000000001],
  [1483401600000, 1035.5313],
  [1483488000000, 1130.8495163207272],
  [1483574400000, 990.6674999999997],
  [1483660800000, 894.0325],
  [1483747200000, 900.0787999999999],
  [1483833600000, 908.0850000000004],
  [1483920000000, 901.8788880390637],

];

const labels = prices.map((el, i) => new Date(el[0]).toLocaleDateString());
const data = {
  labels: labels,
  datasets: [
    {
      data: prices.map((el) => el[1]),

      borderColor: "rgb(0, 0, 0)",
      pointBackgroundColor: "rgba(255, 255, 255, 1)",
    },
  ],
};

const config = {
  type: "line",
  data: data,
 options: {
    responsive: true,
    legend: {
      display: false,
    },
    scales: {
      yAxis: 
        {
          ticks: {
            fontColor: "rgba(255, 255, 255, 1)"
          },
          gridLines: {
            display: false
          },
        },

      xAxis: 
        {
          ticks: {
            display: false
          },
          gridLines: {
            color: "rgba(255, 255, 255, .2)",
            borderDash: [5, 5],
            zeroLineColor: "rgba(255, 255, 255, .2)",
            zeroLineBorderDash: [5, 5]
          }
        }
    }
  }
};

var myChart = new Chart(document.getElementById("myChart"), config);
    <div>
      <canvas id="myChart"></canvas>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
    <script src="chart_data.js" defer></script>

Leave a comment