javascript - Chartjs scaleLabel position - Stack Overflow

admin管理员组

文章数量:1325236

Trying to get the Y axis scale labels to look like the image, to be position on top of the scale and not rotated.

scale options currently look like:

    scales: {
  yAxes: [{
    id: 'temp',
    scaleLabel: {
      display: true,
      labelString: '°C'
    },
    type: 'linear',
    position: 'left'
  }, {
    id: 'ppm',
    scaleLabel: {
      display: true,
      labelString: 'ppm',
    },
    type: 'linear',
    position: 'left',
    ticks: {
      stepSize: 500
    }
  }, {
    id: '%',
    scaleLabel: {
      display: true,
      labelString: '%',
    },
    type: 'linear',
    position: 'right',
    ticks: {
      max: 100,
      min: 0
    }
  }]
}

/

Trying to get the Y axis scale labels to look like the image, to be position on top of the scale and not rotated.

scale options currently look like:

    scales: {
  yAxes: [{
    id: 'temp',
    scaleLabel: {
      display: true,
      labelString: '°C'
    },
    type: 'linear',
    position: 'left'
  }, {
    id: 'ppm',
    scaleLabel: {
      display: true,
      labelString: 'ppm',
    },
    type: 'linear',
    position: 'left',
    ticks: {
      stepSize: 500
    }
  }, {
    id: '%',
    scaleLabel: {
      display: true,
      labelString: '%',
    },
    type: 'linear',
    position: 'right',
    ticks: {
      max: 100,
      min: 0
    }
  }]
}

https://jsfiddle/3a7qvtwz/2/

• javascript
• chart.js

Share Improve this question Follow asked Nov 15, 2017 at 16:19 Jack MasonJack Mason 6311 gold badge22 silver badges77 bronze badges 2

• scale label position can be changed as below,xAxes: [ { scaleLabel: { display: true, labelString: 'Frequency Hz' }, position: 'top' }] – Buminda Commented Dec 1, 2017 at 1:24
• @Buminda No this won't work. The 'position' in your answer is for entire y-axe. – quangteo.media Commented Sep 24, 2018 at 2:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use the Plugin Core API that offers a range of hooks that may be used for performing custom code. To draw the scale labels on top of the different yAxes in your code sample, the afterDraw hook could be defined as follows. It uses CanvasRenderingContext2D.fillText() to draw text directly on the canvas.

plugins:[{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    ctx.font = "bold 14px Arial";
    ctx.fillStyle = "gray";
    var y = 50;

    ctx.textAlign = 'left';        
    ctx.fillText('CO2', 5, y);
    ctx.fillText('°C', 46, y);

    ctx.textAlign = 'right';
    ctx.fillText('%', chart.chart.width - 10, y);
    ctx.restore();
  }
}],

Please have a look at your amended JSFiddle

https://github./chartjs/Chart.js/issues/3706

It's still not supported,but there is a way to workaround.

title: { display: true, text: ['realTile','leftScalelabel...............................

many space....................................................... rightScalelabel'] },

本文标签： javascriptChartjs scaleLabel positionStack Overflow