CODEWITHSUNDEEP
highcharts
stramin
stramin

Reputation: 2390

Align titles for multiple axis in Highstock

I have 4 axis in a Highstock chart:

				var p0 = [
				[1538341200000,110.91],
				[1538427600000,126.01],
				[1538514000000,129.54],
				[1538600400000,125.54]];
				var p1 = [
				[1538341200000,113.14],
				[1538427600000,129.48],
				[1538514000000,132.28],
				[1538600400000,129.53],];
				var t0 = [
				[1538341200000,29.25],
				[1538427600000,37.28],
				[1538514000000,36.1],
				[1538600400000,36.17],];
				var t1 = [
				[1538341200000,29.67],
				[1538427600000,37.53],
				[1538514000000,37.26],
				[1538600400000,37.9],];
        
Highcharts.stockChart('container', {
chart: {
	renderTo: "container"
},
title: {
	text: "Sample test",
	align: "center",
	y: 14
},
legend: {
	enabled: true,
	align: "center",
	verticalAlign: "top",
	y: 40
},
xAxis: {
	ordinal: false
},
yAxis: [
	{
		left: "-100%",
		height: "18%",
		top: "7%"
	},
	{
		left: "-100%",
		height: "18%",
		top: "32%"
	},
	{
		left: "-100%",
		height: "18%",
		top: "57%"
	},
	{
		left: "-100%",
		height: "18%",
		top: "82%"
	}
],
series: [
	{
		name: "Pressure 3",
		data: p0,
    yAxis: 0
	},
	{
		name: "Pressure 4",
		data: p1,
    yAxis: 1
	},
	{
		name: "Temperature 3",
		data: t0,
    yAxis: 2
	},
	{
		name: "Temperature 4",
		data: t1,
    yAxis: 3
	}
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>

Now, I want to add titles to every axis on the top left corner, like this:

				var p0 = [
				[1538341200000,110.91],
				[1538427600000,126.01],
				[1538514000000,129.54],
				[1538600400000,125.54]];
				var p1 = [
				[1538341200000,113.14],
				[1538427600000,129.48],
				[1538514000000,132.28],
				[1538600400000,129.53],];
				var t0 = [
				[1538341200000,29.25],
				[1538427600000,37.28],
				[1538514000000,36.1],
				[1538600400000,36.17],];
				var t1 = [
				[1538341200000,29.67],
				[1538427600000,37.53],
				[1538514000000,37.26],
				[1538600400000,37.9],];
        
Highcharts.stockChart('container', {
chart: {
	renderTo: "container"
},
title: {
	text: "Sample test",
	align: "center",
	y: 14
},
legend: {
	enabled: true,
	align: "center",
	verticalAlign: "top",
	y: 40
},
xAxis: {
	ordinal: false
},
yAxis: [
	{
		title: {
			text: "Pressure 3",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "7%"
	},
	{
		title: {
			text: "Pressure 4",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "32%"
	},
	{
		title: {
			text: "Temperature 3",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "57%"
	},
	{
		title: {
			text: "Temperature 4",
			rotation: 0,
			y: -10
		},
		left: "-101%",
		height: "18%",
		top: "82%"
	}
],
series: [
	{
		name: "Pressure 3",
		data: p0,
    yAxis: 0
	},
	{
		name: "Pressure 4",
		data: p1,
    yAxis: 1
	},
	{
		name: "Temperature 3",
		data: t0,
    yAxis: 2
	},
	{
		name: "Temperature 4",
		data: t1,
    yAxis: 3
	}
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 400px; height: 600px;"></div>

As you can see every title breaks the next one adding some margin and "pushing" them to the right.

enter image description here

This is the expected result:

enter image description here

I tried many highstock properties and css styles to make them float to avoid them to push themselves, but nothing is working.

How to avoid this problem?

Upvotes: 0

Views: 171

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

What you're trying to achieve is not a default behavior for axis title. The easiest way to plot titles as you expect is to make custom titles using Highcharts SVG renderer.

Each yAxis has properties top and left that we can use to plot custom titles at proper positions. Notice, that navigator is just an additional series so yAxis array will have one more element than you defined. Titles created by renderer are Highcharts.SVGElement. Each time the chart will be rendered you have to destroy the old ones and rendered them again (in new positions):

var titlesColl = [],
    titles = [
      "Pressure 3",
      "Pressure 4",
      "Temperature 3",
      "Temperature 4"
    ];

  chart: {
    events: {
      render: function() {
        var chart = this,
          yaxisColl = chart.yAxis,
          offsetY = -4,
          axis,
          title,
          i;

        if (titlesColl.length) {
          titlesColl.forEach(function(elem) {
            elem.destroy();
          });

          titlesColl.length = 0;
        }

        for (i = 0; i < yaxisColl.length - 1; i++) {
          axis = yaxisColl[i];
          title = chart.renderer
            .text(titles[i], axis.left, axis.top + offsetY)
            .css({
              'font-size': '10px'
            })
            .add();

          titlesColl.push(title);
        }
      }
    }

}

chart.events.render documentation

Demo: https://jsfiddle.net/wchmiel/sxnyLhfb/

Upvotes: 1

Related Questions