In Chart.js set chart title, name of x axis and y axis?

Question

Does Chart.js (documentation) have option for datasets to set name (title) of chart (e.g. Temperature in my City), name of x axis (e.g. Days) and name of y axis (e.g. Temperature). Or I should solve this with css?

var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [data]
        }
    ]

}

Realy thanks for help.

For the reference - http://stackoverflow.com/a/38299304/1374554 — Jaison James, Oct 26 '16 at 14:21

score 278 · Accepted Answer · edited Aug 08 '18 at 13:06

278

In Chart.js version 2.0, it is possible to set labels for axes:

options = {
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'probability'
      }
    }]
  }     
}

See Labelling documentation for more details.

edited Aug 08 '18 at 13:06

Marcus Alsterman

683
7
8

answered Apr 30 '16 at 11:29

andyhasit

14,137
7
49
51

yes the sytax is working fine even after converting it into the laravel chart library options.thanks a lot i have been looking for the correct syntx and i got it – ManojKiran A Mar 28 '19 at 05:41
Is there are way to show the axis label but hide the scale ? – Muhammad Ahsan Jan 03 '22 at 09:00
Well i have found how to display axis label without showing scale itself. – Muhammad Ahsan Jan 03 '22 at 09:26

score 55 · Answer 2 · edited Sep 30 '22 at 07:23

55

For Chart.js version 3

options = {
  scales: {
    y: {
      title: {
        display: true,
        text: 'Your Title'
      }
    }
  }     
}

edited Sep 30 '22 at 07:23

Avatar

14,622
9
119
198

answered Apr 21 '21 at 08:56

Ayenew Yihune

1,059
13
19

9

My browser generates an error because `y` should be an object and not an array. However, if I remove the square brackets it works. – Dave F Dec 19 '21 at 07:43
@DaveF Yes, version 3 changes `y` from an array to an object. – Max Jacobson Mar 23 '22 at 22:12

score 17 · Answer 3 · answered Jun 22 '21 at 18:38

For Readers in 2021:

Version

"chart.js": "^3.3.2",

Real World Working Sample:

const optionsTemplate = (yAxisTitle, xAxisTitle) => {
    return {
        scales: {
            yAxes: {
                title: {
                    display: true,
                    text: yAxisTitle,
                    font: {
                        size: 15
                    }
                },
                ticks: {
                    precision: 0
                }
            },
            xAxes: {
                title: {
                    display: true,
                    text: xAxisTitle,
                    font: {
                        size: 15
                    }
                }
            }
        },
        plugins: {
            legend: {
                display: false,
            }
        }
    }
}

And where in the chart object should this option be set... ? — Itération 122442, Aug 13 '21 at 13:23

score 16 · Answer 4 · answered Oct 12 '18 at 01:12

If you have already set labels for your axis like how @andyhasit and @Marcus mentioned, and would like to change it at a later time, then you can try this:

chart.options.scales.yAxes[ 0 ].scaleLabel.labelString = "New Label";

Full config for reference:

var chartConfig = {
    type: 'line',
    data: {
      datasets: [ {
        label: 'DefaultLabel',
        backgroundColor: '#ff0000',
        borderColor: '#ff0000',
        fill: false,
        data: [],
      } ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes: [ {
          type: 'time',
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Date'
          },
          ticks: {
            major: {
              fontStyle: 'bold',
              fontColor: '#FF0000'
            }
          }
        } ],
        yAxes: [ {
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'value'
          }
        } ]
      }
    }
  };

score 8 · Answer 5 · answered Oct 16 '21 at 07:46

8

In chart JS 3.5.x, it seems to me the title of axes shall be set as follows (example for x axis, title = 'seconds'):

options: {
  scales: {x: { title: { display: true, text: 'seconds' }}}
}

see: https://www.chartjs.org/docs/latest/axes/labelling.html

answered Oct 16 '21 at 07:46

Giorgio Barchiesi

6,109
3
32
36

Doesn't work for me. Can you provide a working fiddle? – rob Mar 25 '22 at 10:54

score 7 · Answer 6 · edited May 28 '19 at 06:38

just use this:

<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["1","2","3","4","5","6","7","8","9","10","11",],
      datasets: [{
        label: 'YOUR LABEL',
        backgroundColor: [
          "#566573",
          "#99a3a4",
          "#dc7633",
          "#f5b041",
          "#f7dc6f",
          "#82e0aa",
          "#73c6b6",
          "#5dade2",
          "#a569bd",
          "#ec7063",
          "#a5754a"
        ],
        data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],            
      },]
    },
    //HERE COMES THE AXIS Y LABEL
    options : {
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'probability'
          }
        }]
      }
    }
  });
</script>

I'm using Chart_2.5.0.min.js you can have it here: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js — no.name.added, May 12 '17 at 00:56

score 6 · Answer 7 · edited Feb 03 '23 at 18:18

6

If you are using chart JS v4 try this.

options = {
  scales: {
    y: {
      title: {
        display: true,
        text: 'Test'
      }
    },
    x: {
      title: {
        display: true,
        text: 'Test'
      }
    }
  },
  plugins: {
    legend: {
      display: false,
    },
  }
}

edited Feb 03 '23 at 18:18

Tyler2P

2,324
26
22
31

answered Jan 30 '23 at 09:13

Marimuthu

61
1
4

FXLima · Answer 8 · 2022-04-01T11:53:10.430

See example with name of x axis and y axis left and right.

public barChartOptions: ChartOptions = {
    title: {
      display: true,
      text: 'Custom Chart Title',
    },
    responsive: true,
    legend: {
      position: 'right',
    },
    scales: {
      yAxes: [
        {
          position: 'right',
          scaleLabel: {
            display: true,
            labelString: 'Frequency Rate - right',
          },
        },
        {
          position: 'left',
          scaleLabel: {
            display: true,
            labelString: 'Frequency Rate - left',
          },
        },
      ],
      xAxes: [
        {
          display: true,
          position: 'bottom',
          scaleLabel: {
            display: true,
            labelString: 'Titulo do eixo X',
            fontStyle: 'italic',
            fontSize: 12,
            fontColor: '#030',
          },
        },
      ],
    },
  };

Thank you for posting this (as it contains the answer I used) but please don't post link only answers. The links can rot and it is better if you can include the relevant information here. — rob, Mar 25 '22 at 10:58

score 1 · Answer 9 · answered Mar 29 '23 at 20:11

To name the axis:

inside new Chart()
Go to options (or create it):

options: {

    scales: {
      x: {
        title: { display: true, text: 'X axis label' }
      },
      y: {
        title: { display: true, text: 'Y axis label'}
      }
    },   }

Remember: new Chart() -> options -> scales -> x or y -> title

score 0 · Answer 10 · answered Sep 23 '20 at 07:41

          <Scatter
            data={data}
            // style={{ width: "50%", height: "50%" }}
            options={{
              scales: {
                yAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Probability",
                    },
                  },
                ],
                xAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Hours",
                    },
                  },
                ],
              },
            }}
          />

In Chart.js set chart title, name of x axis and y axis?

10 Answers10

For Readers in 2021:

Version

Real World Working Sample:

Linked