apexcharts draw line chart on top of scatter chart

Question

Currently using "Scatter Charts" to display my xy coordinates, working great. Another requirement is to draw a line chart based on average numbers on top of the scatter chart. Is this possible?

Link to Scatter Charts - https://apexcharts.com/angular-chart-demos/scatter-charts/basic/

Sample graph -

Answer 1

Yes, you can draw mixed charts with ApexCharts. You even have a demo of what you are looking for: Line Scatter – ApexCharts.js

I put the demo here for convenience:

let options = {
  series: [{
    name: 'Points',
    type: 'scatter',
    data: [{
      x: 1,
      y: 2.14
    }, {
      x: 1.2,
      y: 2.19
    }, {
      x: 1.8,
      y: 2.43
    }, {
      x: 2.3,
      y: 3.8
    }, {
      x: 2.6,
      y: 4.14
    }, {
      x: 2.9,
      y: 5.4
    }, {
      x: 3.2,
      y: 5.8
    }, {
      x: 3.8,
      y: 6.04
    }, {
      x: 4.55,
      y: 6.77
    }, {
      x: 4.9,
      y: 8.1
    }, {
      x: 5.1,
      y: 9.4
    }, {
      x: 7.1,
      y: 7.14
    },{
      x: 9.18,
      y: 8.4
    }]
  }, {
    name: 'Line',
    type: 'line',
    data: [{
      x: 1,
      y: 2
    }, {
      x: 2,
      y: 3
    }, {
      x: 3,
      y: 4
    }, {
      x: 4,
      y: 5
    }, {
      x: 5,
      y: 6
    }, {
      x: 6,
      y: 7
    }, {
      x: 7,
      y: 8
    }, {
      x: 8,
      y: 9
    }, {
      x: 9,
      y: 10
    }, {
      x: 10,
      y: 11
    }]
  }],
  chart: {
    height: 350,
    type: 'line'
  },
  fill: {
    type: 'solid'
  },
  markers: {
    size: [6, 0]
  },
  tooltip: {
    shared: false,
    intersect: true
  },
  legend: {
    show: false
  },
  xaxis: {
    type: 'numeric',
    min: 0,
    max: 12,
    tickAmount: 12
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

This particular example has not been integrated using Angular, but I think you can do it quite easily. Take a look at this page if you need additional inspiration: Angular Mixed Chart / Combination Chart Examples – ApexCharts.js

Answer 2

It´s a bit finicky but what ended up working for me is, in order of importance:

• Marker size, otherwise dots may exist but not be visible!

  markers: {
    size: 5,
  },

• Data in format { x: number, y: number }

series: ApexAxisChartSeries = [
    {
        name: "curve",
        type: "line",
        data: [
            { x: 1324508400000, y: 34 },
            { x: 1324594800000, y: 14 },
        ],
    },

    {
        name: "dots",
        type: "scatter",
        data: [
            { x: 1324508400000, y: 94 },
            { x: 1324594800000, y: 27 },
        ],
    },
];

• Chart type line and no animation (some times throws errors due to animations, may be just an issue with current version):

  chart: {
    type: 'line',
    animations: {
      enabled: false,
    },
  },

Answer 3

This also works in Angular, here is a sample config:

this.chartOptions = {          
            series: [{
                name: "Points",
                type: 'scatter',
                data: [{x: 1, y: 3}, {x: 2, y: 4}]
              },
              {
                name: "Line 1",
                type: 'line',
                data: [{x: 1, y: 1}, {x: 2, y: 2}]
              },
              {
                name: "Line 2",
                type: 'line',
                data: [{x: 1, y: 5}, {x: 2, y: 7}]
              }],
            markers: {
                size:[5,0,0],
            },
            stroke:{
                width:[0, 2, 3]
            },
            chart: {
                type: 'line',
            }
};

And don't forget to add the config in the HTML or else it will not work:

<apx-chart
        [series]="chartOptions.series"
        [chart]="chartOptions.chart"
        [markers]="chartOptions.markers"
        [stroke]="chartOptions.stroke"></apx-chart>