Accepted answer

You can do it with the title properites. Check the API documentation here. You will have to mess around a little bit to get things how you want them but the tools are there. What you need are x and y and the chart spacing properties (see this). The same applies to the xAxis title. One of the many great things about HighCharts is their API documentation. It is definitely worth a read-through.


It is so simple. You just have to set x or y property accordingly. Eg:

               yAxis: {
                    offset: 30,
                    opposite: false,
                    title: {
                        align: 'high',
                        offset: 0,
                        useHTML: true,
                        text: 'y axis',
                        rotation: 0,
                        y: -10,
                        x: 48

Refer this API link


I was just trying to do the same thing and I found it simpler to use marginTop for this instead of spacingTop and title properties.

When you increase spacingTop you're increasing the space between the top edge of the chart and the content (including the title), which doesn't affect the space between the plot area and the title, so you still have to also set title properties to get that spacing how you want it.

Increasing marginTop increases the space between the top edge of the chart and the plot area, and the title seems to stay positioned relatively close to the top of the chart, so it increases the space between the title and the plot area without setting any title properties.


+1 for High Charts.

Take a look here for all the styling:

title: {
    text: 'Title',
    floating: true,
    y: -30

Related Query

More Query from same tag