Synopsis

In this example, we plot two arrays of Y-values against an array of X-values.

            
                    const dataA = [18, 15, 14.5, 16, 20.8, 18, 12.3, 10.1, 13, 12.5];
                    const dataB = [8.6, 10.4, 14.7, 12.9, 12.2, 15, 17.3, 20, 21.7, 19.55];
                    const xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
                
            

Chart

The chart's context is a div element named 'chart'. Set the size as you want.

            
                    <div id="chart">

                    </div>
                
            

We create a line chart and set its background color. We also add a legend at the bottom of the chart.

            
                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);     
                    chart.backgroundColor = 'lightgray';
                    chart.layout.legend.position = 'South';
                
            

Data

We create and style two data series. Then we set the chart's data.

            
                    const dsA = {
                        name: 'Series A',
                        data: dataA,
                        style: {
                            stroke: 'green'
                        }
                    };

                    const dsB = {
                        name: 'Series B',
                        data: dataB,
                        style: {
                            stroke: 'blue'
                        }
                    };
        
                    chart.data = {
                        x: xValues,
                        y: [dsA, dsB]
                    };
                
            

Customize

We set the X-axis to display values with 2 decimal places. We also style the zooming area.

            
                    chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
                    chart.interactivity.zoomRect = {
                        stroke: 'darkgray',
                        fill: 'beige'
                    };
                
            

Plot

We finally call the plot function to display the data.

            
                    chart.plot();
                
            

Putting it together

HTML

            
                    <div id="chart">

                    </div>
                
            

JavaScript

            
                    const dataA = [18, 15, 14.5, 16, 20.8, 18, 12.3, 10.1, 13, 12.5];
                    const dataB = [8.6, 10.4, 14.7, 12.9, 12.2, 15, 17.3, 20, 21.7, 19.55];
                    const xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);
                    chart.backgroundColor = 'lightgray';
                    chart.layout.legend.position = 'South';

                    const dsA = {
                        name: 'Series A',
                        data: dataA,
                        style: {
                            stroke: 'green'
                        }
                    };

                    const dsB = {
                        name: 'Series B',
                        data: dataB,
                        style: {
                            stroke: 'blue'
                        }
                    };

                    chart.data = {
                        x: xValues,
                        y: [dsA, dsB]
                    };

                    chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
                    chart.interactivity.zoomRect = {
                        stroke: 'darkgray',
                        fill: 'beige'
                    };

                    chart.plot();