vdl-chart with multiple y-axis

Hi Alex,

we only support a subset of Plotly.js features but if you want to extend the built-in chart to use something we have enabled on vdl-chart then then best way is to use a modifier function.

A short example of how to enable a second y axis:

<script>

  function yAxisModifier (config) {

    var data = config.data;

    var layout = config.layout;

    layout.yaxis2 = {

      zeroline: false,

      title: 'Y Axis 2',

    };

    return config;

  }

</script>

<vdl-chart modifier="=yAxisModifier">

There are lots and lots of settings for the extra features so it will take some time and experimentation to get the desired effect.

The link to the JavaScript version of plotly is here:

https://plot.ly/javascript/multiple-axes/

https://plot.ly/javascript/reference/#scatter

Thanks @Joc O'Connor​ for pointing me in the right direction! Here's what I ended up implementing:

<script>
    function addYAxis(config, title, range, y2_series) {
        y2_series.forEach(function(series) {
            if (typeof config.data[series] != 'undefined') {
                config.data[series].yaxis = 'y2';
            }
        });
        //TODO: prevent legend overlap of yaxis2 title (https://github.com/plotly/plotly.js/issues/1594)
        config.layout.yaxis2 = {
            overlaying: 'y',
            showgrid: false,
            side: 'right',
            title: title,
            range: range
        };
        return config;
    }
</script>
 
<vdl-chart modifier="=addYAxis(config, 'Second axis title', [0, 100], [0, 2])">
  <vdl-chart-series entity="entity1"/>
  <vdl-chart-series entity="entity2"/>
  <vdl-chart-series entity="entity3"/>
</vdl-chart>

which adds a second y-axis on the right of the chart, with title "Second axis title" that ranges from 0 to 100, and moves the first and third vdl-chart-series to the second y-axis.