65

I am using Chartjs for showing diagrams and I need to set title of y axis, but there are no information about it in documentation.

I need y axis to be set like on picture, or on top of y axis so someone could now what is that parameter

I have looked on official website but there was no information about it

Maxime
  • 8,645
  • 5
  • 50
  • 53
emir
  • 1,336
  • 1
  • 14
  • 33
  • 1
    Refering to this [thread](https://github.com/nnnick/Chart.js/issues/114) you can use this updated plugin https://github.com/FVANCOP/ChartNew.js. This wont be the best solution but would work. – karan3112 Aug 10 '15 at 07:50

7 Answers7

187

In Chart.js version 2.0 this is possible:

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

See axes labelling documentation for more details.

Ulysse BN
  • 10,116
  • 7
  • 54
  • 82
andyhasit
  • 14,137
  • 7
  • 49
  • 51
  • 3
    This doesn't work for me - perhaps there is another step that is also relevant to get the label to show? – evansjohnson Jun 07 '16 at 02:07
  • Hard to say without looking at your code. Does it work on a different chart, or just a specific one? What happens if you put the chart elsewhere on the page? Have you checked the version of Chart.js? – andyhasit Jun 09 '16 at 23:16
  • 1
    This works perfectly for me, thank you. (I'm using the `Chart-2.1.4.min.js` library.) – Bobulous Jun 25 '16 at 11:39
  • @andyhasit If I have multiple y axes, how can i set labes for each y scale? (note: I am using angular-chart). – George Lica Jul 04 '16 at 14:38
  • I'm not entirely sure, but as you can see, yAxes is an array, so perhaps you can add multiple entries. The docs also mention yAxisID in them, which I presume means you can do this? – andyhasit Jul 05 '16 at 19:52
  • 1
    @GeorgeLica you just repeat the part between `[` and `]`. Presumably you already have multiple yAxes, so just add `scaleLabel` to each. – Mark Oct 15 '16 at 07:22
  • Thanks to Nathan for his solution; I was able to tweak my chart to add labels. Although I wish that the options were less structured; getting things in the right spot in all of the nested arrays is time-consuming. – Rick Hellewell Apr 26 '17 at 23:05
  • Can you position the title at the top of the axis (if it's Y) – Maki Vlach Nov 24 '20 at 17:49
  • The following worked for me and all other answers did not. scales: {y: {title: {display:true,text: '$/kWh'},ticks: {callback: function (value, index, values) {return ratePrice.format(value);}}}}, – Robbye Rob Jun 02 '21 at 16:37
33

For Chart.js 2.x refer to andyhasit's answer - https://stackoverflow.com/a/36954319/360067

For Chart.js 1.x, you can tweak the options and extend the chart type to do this, like so

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var ctx = this.chart.ctx;
        ctx.save();
        // text alignment and color
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";
        ctx.fillStyle = this.options.scaleFontColor;
        // position
        var x = this.scale.xScalePaddingLeft * 0.4;
        var y = this.chart.height / 2;
        // change origin
        ctx.translate(x, y);
        // rotate text
        ctx.rotate(-90 * Math.PI / 180);
        ctx.fillText(this.datasets[0].label, 0, 0);
        ctx.restore();
    }
});

calling it like this

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).LineAlt(data, {
    // make enough space on the right side of the graph
    scaleLabel: "          <%=value%>"
});

Notice the space preceding the label value, this gives us space to write the y axis label without messing around with too much of Chart.js internals

Fiddle - http://jsfiddle.net/wyox23ga/

enter image description here

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • @Hajjat - you could post a new question and / or a fiddle with the issue. Cheers! – potatopeelings Dec 26 '15 at 00:10
  • Is it possible for bar chart? – Guru Jan 07 '16 at 10:02
  • @Guru - yep, just change everything that says Line to Bar in the above and it will work. – potatopeelings Jan 07 '16 at 10:09
  • @Thunder - I would guess so, but the code would be a bit different. For the y axis we could use the axis scale labels to make space for the axis label. For x axis I reckon we'd have to do something else. – potatopeelings Jan 08 '16 at 10:58
  • @ptatopeelings I could add the x axis name but could not create the space below the chart to properly place it , using y as this.chart.height overlapped the text with x axis labels – Thunder Jan 08 '16 at 11:34
  • @potatopeelings, i've tried to change line into bar for bar horizontal bar chart. but it gives no result as i wanted – Guru Jan 08 '16 at 12:32
  • @Guru - I don't think the standard Chart.js supports horizontal bar chart. If you are looking at a fork, the code may be from an earlier version of Chart.js code and the above may not work as is. – potatopeelings Jan 08 '16 at 13:49
  • 1
    @Thunder - you're right - you need to make space for the x axis label. Do you want to do a quick search to see if such a question already exists? If not, you might want to create a new question (the current one is a bit too focused on the y axis to consider making it generic without a lot of changes). Cheers! – potatopeelings Jan 08 '16 at 13:52
  • Thanks @potatopeelings. I've used Chart.HorizontalBar.js – Guru Jan 09 '16 at 06:14
  • @potatopeelings asked new question here http://stackoverflow.com/questions/34715163/how-to-set-chartjs-x-axis-title – Thunder Jan 11 '16 at 06:08
  • This method should be deprecated and users should refer to the answers referencing Chart.js version 2.0 – jmercouris May 23 '19 at 15:32
  • 1
    @jmercouris - added a note at the top of the answer. I think the question was for 1.x (don't recall if 2.x was available then). Cheers! – potatopeelings May 23 '19 at 20:49
22

For x and y axes:

     options : {
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'probability'
          }
        }],
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'hola'
          }
        }],
      }
    }
no.name.added
  • 359
  • 4
  • 4
19

For Chart.js 3.x

options: {
  scales: {
    y: {
      title: {
        display: true,
        text: 'Y axis title'
      }
    }
  }
}
ssserebrov
  • 191
  • 1
  • 2
  • To see all the current configuration available (3.x) of the titles in the axes follow this link: https://www.chartjs.org/docs/latest/samples/scale-options/titles.html – IvanAllue Feb 16 '22 at 10:24
13

chart.js supports this by defaul check the link. chartjs

you can set the label in the options attribute.

options object looks like this.

options = {
            scales: {
                yAxes: [
                    {
                        id: 'y-axis-1',
                        display: true,
                        position: 'left',
                        ticks: {
                            callback: function(value, index, values) {
                                return value + "%";
                            }
                        },
                        scaleLabel:{
                            display: true,
                            labelString: 'Average Personal Income',
                            fontColor: "#546372"
                        }
                    }   
                ]
            }
        };
Rajiv
  • 447
  • 4
  • 12
6

For me it works like this:

    options : {
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'probability'
          }
        }]
      }
    }
no.name.added
  • 359
  • 4
  • 4
3

Consider using a the transform: rotate(-90deg) style on an element. See http://www.w3schools.com/cssref/css3_pr_transform.asp

Example, In your css

.verticaltext_content {
  position: relative;
  transform: rotate(-90deg);
  right:90px;   //These three positions need adjusting
  bottom:150px; //based on your actual chart size
  width:200px;
}

Add a space fudge factor to the Y Axis scale so the text has room to render in your javascript.

scaleLabel: "      <%=value%>"

Then in your html after your chart canvas put something like...

<div class="text-center verticaltext_content">Y Axis Label</div>

It is not the most elegant solution, but worked well when I had a few layers between the html and the chart code (using angular-chart and not wanting to change any source code).

Peter Manger
  • 31
  • 3