Highchart multi Yaxis in one line

Question

I want to create chart like that in highcharts: IOT Central Chart

this is what i get until now:

Highcharts.setOptions({
 colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

// Get the data. The contents of the data file can be viewed at
$.getJSON(
  'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
  function (activity) {
    $.each(activity.datasets, function (i, dataset) {

      // Add X values
      dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
        return [activity.xData[j], val];
      });

      $('<div class="chart">')
        .appendTo('#container')
        .highcharts({
          chart: {
            type: "spline", 
            marginLeft: 40, // Keep all charts left aligned
            marginTop: 7,
            marginBottom: 7
          },
          title: {
            text: null,
          },
          credits: {
            enabled: false
          },
          legend: {
            enabled: false
          },
          xAxis: {
            visible: false,
            labels: {
              format: '{value} km'
            }
          },
          yAxis: {
            visible: true,
            title: {
              text: null
            },
            tickAmount: 2,
            minPadding: 0,
            lineWidth:1,
            gridLineColor: "transparent"
          },
          series: [{
            data: dataset.data,
            name: dataset.name,
            color: Highcharts.getOptions().colors[i],
            fillOpacity: 0.3,
            tooltip: {
              valueSuffix: ' ' + dataset.unit
            }
          }]
        });
    });
  }
);

.chart {
    min-width: 320px;
    max-width: 800px;
    height: 150px;
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

but the problem is that i cant export or zoom do normal legend to this chart.

Answer 1

The problem here is that you create three separate charts instead of one.

Highstock allows you to position and resize axes (height & top properties):

  yAxis: [{
    height: '50%'
  }, {
    top: '50%',
    height: '50%'
  }], 

API references:

• https://api.highcharts.com/highstock/yAxis.height
• https://api.highcharts.com/highstock/yAxis.top

In fact it's going to work in Highcharts too (even though it's not documented).

Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/