How to convert a Chart to HTML Polyline

Question

Is there a easy way to convert a chart dataset to html polyline image. I looked online but I couldn't find any information. Website like https://www.coingecko.com/en use it to save data, when loading a image instead of the whole dataset.

I would like to convert this dataset

[[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]]

This this a examples of the chart I would like to convert. only the line

var options = {
      chart: {
        type: "line",
        height: 300,
      },
      
grid: {
    show: false,},
      yaxis: {
         show: false},
       series: [{
        data: 
        [[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]]
        
      }],
  
    };

    var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);

    chart.render();

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

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

Answer 1

Having looked at the code produced by the chart library it would be quite messy to extract the graph line only and make into a polyline - it is drawn as separate lines alongside the icons and axes so would take some disentangling.

It would seem easier just to create a polyline from the given points.

This snippet takes the array of points, finds the min and max values and creates a polyline within an svg by scaling appropriately.

const height = 300; //the number of pixels high the chart is to be
const points = [[1631795078906,47984.94344309375],[1631795361178,47968.97087336728],[1631795684573,47981.03399262954],[1631795988970,48038.04805252912],[1631796168853,48105.481747620644],[1631796599171,48268.82932326462],[1631796859142,48222.19863313715],[1631797214493,48143.749577482864],[1631797492532,48109.00367245081],[1631797804923,48049.53839120206],[1631798079599,48086.5348655504],[1631798363000,48061.203518352515],[1631798363000,48061.203518352515]];

const len = points.length;
let minx = points[0][0]
let maxx = points[0][0];
let miny = points[0][1];
let maxy = points[0][1];

points.forEach( (point) => {
  minx = (point[0] < minx) ? point[0] : minx;
  maxx = (point[0] > maxx) ? point[0] : maxx;
  miny = (point[1] < miny) ? point[1] : miny;  
  maxy = (point[1] > maxy) ? point[1] : maxy;
} );

function setup() {
const width = window.innerWidth;
let svg = '<svg width="' + width +  '" height="' + (height+4) + '"><polyline points="';

points.forEach( (point) => {
  svg = svg + ((point[0] - minx) / (maxx - minx)) * width + ',' + (height - ((point[1] - miny) / (maxy - miny)) * height + 2) + ' ';
});
svg = svg + '" stroke-linejoin="round" style="fill: transparent; stroke:blue; stroke-width:4" /></svg>';
document.querySelector('div').innerHTML = svg;
}
window.onresize = setup;
setup();

<div></div>