Question

0

467

Views

How do you add Axis Labels on to both x-axis and y-axis? (Chart.js)

I have a chart.js running, but i really want to add axis names on teh axises, but dont know how. Could i get some help?

I have tried to figure it out by searching up, but can't find anything that explain it well.

What is am trying to get:

My chart code:

    const ctx = document.getElementById('chart').getContext('2d');
    window.myChart = new Chart(ctx,{ // having the "myChart" as a window. insted of const was sugested by someone on StackOverflow (makes the const global, i can therefor use it in another function)
        type: 'line',
        data: {
            labels: arrayTheta,
            datasets: [{
                //label: graphLabels,
                data: arrayRangeArray[0],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',

                borderColor: 'rgba(255, 99, 132, 1)',
                pointRadius: 0,
                tension: 0.4  //The line "tension: 0.4" makes the graph a little bit smoother (might remove later)
            },
            {
              //label: graphLabels,
              data: arrayRangeArray[1],
              backgroundColor: 'blue, 0.2',

              borderColor: 'blue',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[2],
              backgroundColor: 'pink, 0.2',

              borderColor: 'pink',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[3],
              backgroundColor: 'orange, 0.2',

              borderColor: 'orange',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[4],
              backgroundColor: 'yellow, 0.2',

              borderColor: 'yellow',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[5],
              backgroundColor: 'black, 0.2',

              borderColor: 'black',
              pointRadius: 0,
              tension: 0.4

            }],
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
                ,x: {
                  display: true,
                  type: 'linear'
                }
            }
        }
    });

It would be awesome if someone could implement it into my code and the send it here.

Thanks in advance!!

about 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-08-18T14:57:11.570Z

This can be done with the following options:

options: {
  scales: {
    y: {
      beginAtZero: true,
      title: {
        display: true,
        text: 'Y-Axis Label'
      }
    },
    x: {
      title: {
        display: true,
        text: 'X-Axis Label'
      }
    }
  }
}

For further information, consult Scale Title Configuration from the Chart.js documentation.

Please take a look at your amended code and see how it works with static data.

new Chart('chart', {
  type: 'line',
  data: {
    labels: ['A', 'B','C','D','E'],
    datasets: [{
        label: 'Dataset 1',
        data: [8, 7, 5, 6, 2],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        pointRadius: 0,
        tension: 0.4 
      },
      {
        label: 'Dataset 2',
        data: [2, 4, 2, 4, 7],
        backgroundColor: 'blue, 0.2',
        borderColor: 'blue',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 3',
        data: [5, 8, 7, 6, 2],
        backgroundColor: 'pink, 0.2',
        borderColor: 'pink',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 4',
        data: [8, 7, 5, 6, 2],
        backgroundColor: 'orange, 0.2',
        borderColor: 'orange',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 5',
        data: [5, 3, 2, 4, 1],
        backgroundColor: 'yellow, 0.2',
        borderColor: 'yellow',
        pointRadius: 0,
        tension: 0.4
      },
      {
        label: 'Dataset 6',
        data: [5, 6, 2, 8, 7],
        backgroundColor: 'black, 0.2',
        borderColor: 'black',
        pointRadius: 0,
        tension: 0.4
      }
    ],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Y-Axis Label'
        }
      },
      x: {
        title: {
          display: true,
          text: 'X-Axis Label'
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" height="110"></canvas>

0

467

How do you add Axis Labels on to both x-axis and y-axis? (Chart.js)

1 answers

0

Find remote jobs

Andres GPT