javascript - Ability to rotate y axis title in chart.js

I'm trying to rotate the title of the y axis 90 degrees clockwise in chart.js but I couldn't find any way to do this.

This question chartjs: trying to rotate the y-Axis label only rotates the ticks/labels not the y axis title itself.

The only related post I can find is this Ability to rotate axis title and the response was from Jan 26, 2021 saying there was no way to do this.

I have attached my javascript and html code below.

Any help would be greatly appreciated.

The y axis title I would like to rotate is highlighted in red and called: Number of defects. Ideally I'd like to rotate it 90 degrees clockwise.

const labels = ['2021-06-07 00:00:00', '2021-06-08 00:00:00', '2021-06-09 00:00:00'];

        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'Fixed defects',
                    backgroundColor: 'rgb(0, 255, 0)',
                    borderColor: 'rgb(0, 255, 0)',
                    data: ['2', '73', '34'],
                    barThickness: 5
                }, {
                    label: 'Open defects',
                    backgroundColor: 'rgb(255, 0, 0)',
                    borderColor: 'rgb(255, 0, 0)',
                    data: ['0', '5', '2'],
                    barThickness: 5
               
                }]
        };

        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    x: {
                        min: '2021-06-07 00:00:00',
                        max: '2021-09-10 00:00:00',
                        type: 'time',
                        time: {
                            unit: 'week'
                        },
                        stacked: true,
                        title: {
                            text: 'Dates (weeks)',
                            display: true
                        }
                    },
                    y: {
                        stacked: true,
                        title: {
                            text: 'Number of defects',
                            display: true
                        }
                    }
                }
            }
        };

        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );

<!DOCTYPE html>
<meta charset="utf-8">

<script src=".js"></script>
<script src="@^2"></script>
<script src="@^1"></script>
<link rel="stylesheet" type="text/css" href="../styles.css">

<body>
    
    <div>
        <canvas height="100px" id="myChart"></canvas>
    </div>
    <script>
        
    </script>



</body>

I'm trying to rotate the title of the y axis 90 degrees clockwise in chart.js but I couldn't find any way to do this.

This question chartjs: trying to rotate the y-Axis label only rotates the ticks/labels not the y axis title itself.

The only related post I can find is this Ability to rotate axis title and the response was from Jan 26, 2021 saying there was no way to do this.

I have attached my javascript and html code below.

Any help would be greatly appreciated.

The y axis title I would like to rotate is highlighted in red and called: Number of defects. Ideally I'd like to rotate it 90 degrees clockwise.

const labels = ['2021-06-07 00:00:00', '2021-06-08 00:00:00', '2021-06-09 00:00:00'];

        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'Fixed defects',
                    backgroundColor: 'rgb(0, 255, 0)',
                    borderColor: 'rgb(0, 255, 0)',
                    data: ['2', '73', '34'],
                    barThickness: 5
                }, {
                    label: 'Open defects',
                    backgroundColor: 'rgb(255, 0, 0)',
                    borderColor: 'rgb(255, 0, 0)',
                    data: ['0', '5', '2'],
                    barThickness: 5
               
                }]
        };

        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    x: {
                        min: '2021-06-07 00:00:00',
                        max: '2021-09-10 00:00:00',
                        type: 'time',
                        time: {
                            unit: 'week'
                        },
                        stacked: true,
                        title: {
                            text: 'Dates (weeks)',
                            display: true
                        }
                    },
                    y: {
                        stacked: true,
                        title: {
                            text: 'Number of defects',
                            display: true
                        }
                    }
                }
            }
        };

        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr/npm/chart.js"></script>
<script src="https://cdn.jsdelivr/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr/npm/chartjs-adapter-moment@^1"></script>
<link rel="stylesheet" type="text/css" href="../styles.css">

<body>
    
    <div>
        <canvas height="100px" id="myChart"></canvas>
    </div>
    <script>
        
    </script>



</body>

Share Improve this question edited Mar 10, 2022 at 19:14 asked Mar 7, 2022 at 10:19 Liam 56310 silver badges31 bronze badges

1 When you say rotate, you mean 90 degrees clockwise? or something else? – Tushar Gupta Commented Mar 7, 2022 at 10:22
Yes rotate 90 degrees clockwise – Liam Commented Mar 7, 2022 at 10:25
1 Have you checked this fiddle? There is no out of the box soln, but someone has made a fiddle with custom JS jsfiddle/Leelenaleee/L2vhwe6u/33 – Tushar Gupta Commented Mar 7, 2022 at 10:28

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

You can use a custom plugin, to make space you first need to increase the padding on the left, after that you can calculate the correct position by taking the average of the top and bottom y's of the chart area.

Also you should not include chart.js 2 times. When chart.js updates to V4 you will have V4 and V3 installed which will give unwanted behaviour.

Example:

const customTitle = {
  id: 'customTitle',
  beforeLayout: (chart, args, opts) => {
    const {
      display,
      font
    } = opts;
    if (!display) {
      return;
    }

    const {
      ctx
    } = chart;
    ctx.font = font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'

    const {
      width
    } = ctx.measureText(opts.text);
    chart.options.layout.padding.left = width * 1.1;
  },
  afterDraw: (chart, args, opts) => {
    const {
      font,
      text,
      color
    } = opts;
    const {
      ctx,
      chartArea: {
        top,
        bottom,
        left,
        right
      }
    } = chart;

    if (opts.display) {
      ctx.fillStyle = color || Chart.defaults.color
      ctx.font = font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'
      ctx.fillText(text, 3, (top + bottom) / 2)
    }
  }
}

const labels = ['2021-06-07 00:00:00', '2021-06-08 00:00:00', '2021-06-09 00:00:00'];

const data = {
  labels: labels,
  datasets: [{
    label: 'Fixed defects',
    backgroundColor: 'rgb(0, 255, 0)',
    borderColor: 'rgb(0, 255, 0)',
    data: ['2', '73', '34'],
    barThickness: 5
  }, {
    label: 'Open defects',
    backgroundColor: 'rgb(255, 0, 0)',
    borderColor: 'rgb(255, 0, 0)',
    data: ['0', '5', '2'],
    barThickness: 5

  }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      x: {
        min: '2021-06-07 00:00:00',
        max: '2021-09-10 00:00:00',
        type: 'time',
        time: {
          unit: 'week'
        },
        stacked: true,
      },
      y: {
        stacked: true,
      }
    },
    plugins: {
      customTitle: {
        display: true,
        text: 'Number of defects',
        color: 'blue'
      }
    }
  },
  plugins: [customTitle]
};

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr/npm/chartjs-adapter-moment@^1"></script>

<body>
  <div>
    <canvas height="100px" id="myChart"></canvas>
  </div>
</body>

It's not a solution to your question, but an alternative: You can easily modify the ticks in such a way that only the topmost one shows a different text. Usually a long title text fits better in the default vertical way. Still questionable if it's nice to have them in opposite directions in case of left and right y-axes.

options: {
    scales: {
        temp: {
            title:{align:'end', text:'Temperatures in °C', display: true},
            type: 'linear',
            display: true,
            position: 'left',
            min:20,
            max:70
        },  
        flow: {
            ticks: {
                // Add unit to last tick
                callback: function(value, index, ticks) {
                    if ( index > ticks.length-2) return  value +' m³/h';
                    else return value;
                }
            },
            type: 'linear',
            display: true,
            position: 'right',
            min:0,
            max:5.0,

            // grid line settings
            grid: {
                drawOnChartArea: false, // only want the grid lines for one axis to show up
            },
        },
}   }

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745202675a4616420.html

javascript - Ability to rotate y axis title in chart.js - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Ability to rotate y axis title in chart.js - Stack Overflow

2 Answers 2

相关推荐