Synopsis

In this example, we plot the functions sin(x) and cos(x) within the interval [-2π ; +2π]. The former appears in dashed red line while the latter uses plain blue line. Values on the X-axis are shown with 2 decimal places, and those on the Y-axis with 3 decimal places. The zooming area displays a light-gray background. A legend is added at the top-left corner of the chart. A bold title sits on the top. The chart initially displays data within [-π ; +π]. Pan it to view the rest of the data.

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 give it a title. Its background color is left transparent. We add a legend at the top-left corner of the chart.

            
                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);
                    chart.layout.title = {
                        text: 'Sine and Cosine',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };
                    chart.layout.legend.position = 'NorthWest';
                
            

Data

We create and style two data series. Then we generate X and Y-values for both functions. Finally we set the chart's data.

                
                    const sin = {
                        name: 'sin(x)',
                        data: [],
                        style: {
                            stroke: 'red',
                            strokeDashArray: '2 3'
                        }
                    };
                    const cos = {
                        name: 'cos(x)',
                        data: [],
                        style: {
                            stroke: 'blue'
                        }
                    };

                    let xValues = [];
                    for (let i = -800; i <= 800; i++) {
                        let x = Math.PI * i / 400;
                        xValues.push(x);
                        sin.data.push(Math.sin(x));
                        cos.data.push(Math.cos(x));
                    }

                    chart.data = {
                        x: xValues,
                        y: [sin, cos]
                    };
                
            

Customize

The X-axis shows values with 2 decimal places. The Y-axis shows values with 3 decimal places. We set the zooming area's background color as light-gray.

            
                    chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
                    chart.layout.yAxis.tick.text = (val) => val.toFixed(3);
                    chart.interactivity.zoomRect.fill = 'lightgray';
                
            

Plot

We finally call the plot function to display the data within [-π ; +π]. Pan the chart to explore the rest of the data. Then double-click to go back to the initial view.

            
                    chart.plot(-Math.PI, Math.PI);
                
            

Putting it together

HTML

                
                    <div id="chart">

                    </div>
                
            

JavaScript

                
                    const context = document.getElementById('chart');
                    const chart = new LineChart(context);
                    chart.layout.title = {
                        text: 'Sine and Cosine',
                        style: {
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    };
                    chart.layout.legend.position = 'NorthWest';

                    const sin = {
                        name: 'sin(x)',
                        data: [],
                        style: {
                            stroke: 'red',
                            strokeDashArray: '2 3'
                        }
                    };
                    const cos = {
                        name: 'cos(x)',
                        data: [],
                        style: {
                            stroke: 'blue'
                        }
                    };

                    let xValues = [];
                    for (let i = -800; i <= 800; i++) {
                        let x = Math.PI * i / 400;
                        xValues.push(x);
                        sin.data.push(Math.sin(x));
                        cos.data.push(Math.cos(x));
                    }

                    chart.data = {
                        x: xValues,
                        y: [sin, cos]
                    };

                    chart.layout.xAxis.tick.text = (val) => val.toFixed(2);
                    chart.layout.yAxis.tick.text = (val) => val.toFixed(3);
                    chart.interactivity.zoomRect.fill = 'lightgray';

                    chart.plot(-Math.PI, Math.PI);