Rotate chart title in Echarts? - echarts

Question

In Apache Echarts, is there a way to rotate the title text of a chart so that it is vertically oriented on one side rather than horizontal on the top? The title at the top sometimes takes important chart real-estate that my series in some cases can overlap. I would like to instruct Echarts when there's a space crunch to move the title off to the left side in a vertical position (like reading titles on the spines of books in a library). There appears to be several "rotate" options for labels, but nothing for titles.

Answer 1

I am not sure you can rotate the main title if you use the default canvas renderer. In this case, you may want to play with the name of your yAxis like this:
const myChart = echarts.init(document.getElementById('main'));
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: 'This is my title',
nameLocation: 'center',
nameRotate: 90,
nameGap: 45,
nameTextStyle: {
color: 'black',
fontSize: 18,
fontWeight: 'bold'
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
Alternatively, you could use the SVG renderer and add a bit of CSS to transform the main title (which is a <text> element):
const myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });
let option = {
title: {
text: 'This is my title'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
svg g text:last-child {
transform: rotate(-90deg) translateX(-250px);
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>