Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I make sure that my graph's y-axis always starts at zero, hiding any numbers that are negative from view?

var fireCtx = document.getElementById('fireNumberChart').getContext('2d');
var fireChart = new Chart(fireCtx, {
    type: 'line',
    data: {
        labels: [], // Add your labels here
        datasets: [{
            label: 'Sensor Value',
            data: [], // Add your sensor data here
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 0, // Ensure the y-axis starts at 0
                    beginAtZero: true,
                    precision: 0 // Display whole numbers only
                }
            }]
        }
    }
});

I want to ensure that the lowest number on the y-axis is always fixed to 0. this is the JavaScript code I’m using for the chart

Tags:

2

Answers


  1. 0

    Or filter data

      const ctxWithoutNegativeValues = document.getElementById('chartWithoutNegativeValues');

  const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
  const values = [12, 19, -3, 5, -2, -3];


  const filterData = (labelArray, valuesArray) => {
    const labels = [...labelArray]
    const values = [...valuesArray]

    const filteredLabels = [];
    const filteredValues = valuesArray.filter((v,i) => {
      const isPositiveValue = v > 0;
      isPositiveValue && filteredLabels.push(labels[i]);

      return isPositiveValue;
    })


    return [filteredLabels, filteredValues]
  }

  const [filteredLabels, filteredValues] = filterData(labels, values);

  new Chart(ctxWithoutNegativeValues, {
    type: 'bar',
    data: {
      labels: filteredLabels,
      datasets: [{
        label: 'Without(filtered) Negative Values',
        data: filteredValues,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  })
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div>
      <canvas id="chartWithoutNegativeValues"></canvas>
    </div>
    Login or Signup to reply.
  2. 0

    Also you can hide the negative data

      const ctxWithHiddenNegativeValues = document.getElementById('chartWithHiddenNegativeValues');

  const labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
  const values = [12, 19, -3, 5, -2, -3];


  const hideData = (labelArray, valuesArray) => {
    const labels = [...labelArray]
    const values = [...valuesArray]

    const hiddenLabels = [];
    const hiddenValues = valuesArray.map((v,i) => {
      const isPositiveValue = v > 0;
      hiddenLabels.push(labels[i]);

      return isPositiveValue ? v : 0;
    })


    return [hiddenLabels, hiddenValues]
  }

  const [hiddenLabels, hiddenValues] = hideData(labels, values);

  new Chart(ctxWithHiddenNegativeValues, {
    type: 'bar',
    data: {
      labels: hiddenLabels,
      datasets: [{
        label: 'With Hidden Negative Values',
        data: hiddenValues,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  })
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div>
      <canvas id="chartWithHiddenNegativeValues"></canvas>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search