Search code examples
javascriptchartsteechart

Does TeeChart in javascript support multiple y-axes at the same time?

I am looking at TeeChart to create a time series line chart that can display multiple series with each series having its own y-axis. I would like all the axes on the same side and be visible at the same time. I have seen examples where the multiple vertical y-axes are stacked one above the other but I would like them to be standing side by side. I have provided an example. Thanks in advance.

enter image description here

Solution

  • You can see some examples about Axes at the online demo here.
    And here an example trying to achieve what you are requiring:

    var Chart, series, axis, nSeries;

function draw() {
  Chart = new Tee.Chart("canvas1");

  nSeries=4;
  Chart.panel.margins.left = 25;
  
  for (var i=0; i<nSeries; i++) {
    series = Chart.addSeries(new Tee.Line());
    series.addRandom();
    
    if (i==0)
      axis = Chart.axes.left;
    else {
      axis = Chart.axes.add(false,false);
      axis.position = -i*15;
      axis.grid.visible=false;
    }
    
    series.vertAxis=axis;
    
    axis.format.stroke.fill = series.format.fill;
    
  }
  
  Chart.draw();
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
</head>

<body onload="draw()">
  <canvas id="canvas1" width="700" height="300">
    This browser does not seem to support HTML5 Canvas.
</canvas>
</body>

</html>