How To Create Line Graph In HTML?

Leave a Comment / HTML, JavaScript / By

In this blog post, You will learn to make a Line graph in HTML. A line graph is used to display and compare large data in Some intervals of time with help of lines. Let us learn about it in detail:- 

Line graph in HTML

To make this line graph in Html we will use a charting library named plotly.js in JavaScript. This Library comes with 40 chart types, 3D charts, Statistical graphs, and SVG Maps. This Graphs Code Consists Const data which is used to define data, Const layout is used to define the layout of the graph, and plotly.newplot is used to show the graph. You can set the title of the graph and axis in the layout section. The code and Output of this are:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title> Graph in HTML </title>
    </head>
    <script src = “https://cdn.plot.ly/plotly-latest.min.js” >
   
    </script>

 

<body>

 

    <div id= “Plot” style= ” width:100%; max-width:800px “> </div>

 

    <script>
        const xArray = [45, 50, 65, 80, 97, 105, 110, 120, 135, 130, 145, 170];
        const yArray = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 16];
        const data = [{
            x: xArray,
            y: yArray,
            mode: “lines”
        }];
        const layout = {
            xaxis: { range: [30, 180], title: ” X Axis –>” },
            yaxis: { range: [5, 17], title: ” Y Axis –>” },
            title: ” X vs Y Axis “
        };

 

        Plotly.newPlot( “Plot”, data, layout );
    </script>

 

</body>

 

</html>

OUTPUT

Line graph in HTML

We hope you got the answer to your question. As you are now learned about the Line graph you should now learn about Creating a Pie Chart in HTML. As both the topics are related Check it out we have a detailed blog post on it and it will be helpful to you.

 

Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible. Till then check out more posts and find answers to more amazing questions.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *