1

I have a collection of 1000s of x/y points. I would like to plot them on a chart with a line connecting them all. This should be very easy to do but upon reading the docs there is no plot(x,y) type function. I am noticing the following:

  • It looks like a label has to be created for every x value. I may not know the x values at the time of the charts creation
  • I have huge numbers with many decimal places. I assume this will mean that most x values end up between labels.
  • Is there a way to plot the points without having a circular plot point shape? Basically a smooth line running all the way from the left to the right that is created based on the x/y data?

Here is some example data so you get the idea:

data: [ 
  {x: 21345.67890, y: 40},
  {x: 22783.12345, y: 43},
  {x: 27900.00012, y: 80},
  // many more plot points
],

Am I missing something obvious? Is there a quick example someone could whip up to show me how this works?

ekjcfn3902039
  • 1,673
  • 3
  • 29
  • 54
  • 1
    I think I found the answer. I need to use scatter chart. https://stackoverflow.com/questions/45098211/chart-js-plot-line-graph-with-x-y-coordinates – ekjcfn3902039 Nov 11 '19 at 18:09
  • Set the line to span the gaps? `var chart = new Chart(ctx, { type: 'bar', data: { datasets: [{ label: 'Moon', type: 'line', spanGaps: true }` – luigivampa Nov 12 '19 at 01:14
  • Thanks, but the solution I referenced in the OP thread is the correct one and worked for me – ekjcfn3902039 Nov 12 '19 at 16:10

1 Answers1

0

It looks like a label has to be created for every x value. I may not know the x values at the time of the charts creation

I am not sure how your data arises, but aking into consideration the information provided, you should create an object containing all of your data points and use the object within the chart function.

To provide a solution for this part we would need more input about how your data is built.

I have huge numbers with many decimal places. I assume this will mean that most x values end up between labels.

Well, this is more or less the spirit of a line chart. Depending on the data's value you should just define your axes properly to get a understandable visualization of your data.

Is there a way to plot the points without having a circular plot point shape? Basically a smooth line running all the way from the left to the right that is created based on the x/y data?

Chart.JS comes with a lot of options to play with. E.g. you could use pointStyle or pointRadius properties to change the points to your needs.

I attached an example for you to adapt as needed. As you can see the lines are smoothly visualized. The example uses multiple chart types in one. You can just remove the bar part.

For further reference check out the official documentation, especially the line-chart part: https://www.chartjs.org/docs/latest/charts/line.html

var optionsMulti = {
            chart: {
              height: 280,
              width: 375,
              type: 'line',
              stacked: false,
              toolbar: {
                show: false
              },
              plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
              },
            },
            },
            series: [{
              name: 'Goals scored',
              data: [2, 4, 5, 1, 1, 3, 3, 2, 4, 5, 1, 3]
            }, {
              name: 'Goals Conceded',
              data: [1, 1, 3, 4, 2, 2, 3, 2, 1, 2, 5, 3]
            }, {
              name: 'Points gained',
              type: 'column',
              data: [3, 3, 3, 0, 0, 3, 0, 0, 3, 3, 0, 1]
            }],
            stroke: {
              width: [4, 4, 4],
              curve: 'smooth'
            },
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            xaxis: {
              type: 'category',
              line: {
                show: false
              },
            },
            yaxis: {
              min: 0,
              max: 6,
              tickamount: 6,
              labels: {
                show: false
              },
              line: {
                show: false
              },
            },
          };

          var chartMulti = new ApexCharts(
            document.querySelector("#chartMulti"),
            optionsMulti
          );

          chartMulti.render();
<html>

<body>

<div id="chartMulti"></div>

</body>

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

</html>
JSRB
  • 2,492
  • 1
  • 17
  • 48