Sample: Dual-axis line

Revenue on the primary (left) axis; margin % on the secondary (right).

Live preview

Code

<div id="chart" style="width:800px;height:480px"></div>
<script type="module">
  import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';

  new Insight('#chart', {
    chartData: {
      chartType: 'line',
      isDataTransposed: true,
      seriesData: [
        ['', 'Q1', 'Q2', 'Q3', 'Q4'],
        ['Revenue', 120, 132, 141, 155],
        ['Margin %', 18, 19, 17, 21],
      ],
      title: { visible: true, text: 'Revenue and margin' },
      subtitle: { visible: false, text: '' },
      axes: {
        left: {
          axisTitle: { visible: true, text: 'Revenue' },
          labels: {
            preferredTickInterval: 20,
            numberFormat: {
              mode: 'custom',
              customFormat: {
                prefix: '$',
                postfix: '',
                decimalPlaces: 0,
                forceDecimals: false,
                thousandSeparator: ',',
                decimalSeparator: '.',
                signDisplay: 'auto',
                scaleDown: 0,
              },
            },
          },
        },
        right: {
          id: 'secondaryRange',
          enabled: true,
          visible: true,
          boundSeries: [1],
          axisTitle: { visible: true, text: 'Margin %' },
          labels: {
            preferredTickInterval: 5,
            numberFormat: {
              mode: 'custom',
              customFormat: {
                prefix: '',
                postfix: '%',
                decimalPlaces: 0,
                forceDecimals: false,
                thousandSeparator: ',',
                decimalSeparator: '.',
                signDisplay: 'auto',
                scaleDown: 0,
              },
            },
          },
        },
      },
    },
  });
</script>

Docs: Secondary / dual axis