Create your first Chart
Here we will discus about how to create javascript chart using cosfire chart
Step by step create Charts in Javascript in 5 minutes
Let us create a chart using JavaScript in a simple HTML page.

The easiest way to use Cosfire chart is to simply load the script in the page. Then define chart container div and finally write some javascript code to render the chart.

Step 1: Lets Create a html file MyFirstChart.html
Lets Create a html file in your computer. Here in this MyFirstChart.html file we will write some code in the following steps.

Step 2: Add a DIV in HTML as Chart Container
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id='chart-container' style="width:800px;height:300px;"></div>
    </body>
</html>

Step 3: Link Cosfire library script in the page.
<script src="[HOST]/release/cosfire.chart.min.js"></script>

Step 4: Now write some code to create a chart in JavaScript.
<script>
    function createChart() {
        var chart = new Cosfire.Chart("chart-container", { 
            animationEnabled: true,
            titles: [{ text : "Cosfire Chart Quick Start!" }], // we can add multiple title
            axesX: [{ title : "Country" }],     // we can add multiple xAxis
            axesY: [{ title : "Population" }],  // we can add multiple yAxis
            data: [{
                    plotAs: "column",
                    tooltipText: "<b style='color:{color};'>{xLabel}: {y}",
                    points: [
                        { xLabel: "China", y: 431002651 },
                        { xLabel: "India", y: 341002651 },
                        { xLabel: "United States", y: 	331002651 },
                        { xLabel: "Indonesia",  y: 273523615 },
                        { xLabel: "Pakistan", y: 220892340 },
                        { xLabel: "Brazil", y: 212559417 },
                        { xLabel: "Nigeria", y: 206139589 },
                        { xLabel: "Bangladesh",  y: 164689383 },
                        { xLabel: "Russia",  y: 345934462 },
                        { xLabel: "Mexico", y: 428932753 }
                    ]
                }]
            });
            
        chart.render(); // draw the chart
    }

    window.addEventListener("load", createChart);
</script>

Finally MyFirstChart.html File looks Like Below
<!doctype html>
<html>
    <head>
        <script src="[HOST]/release/cosfire.chart.min.js"></script>
        <script>
            function createChart() {
                var chart = new Cosfire.Chart("chart-container", { 
                    animationEnabled: true,
                    titles: [{ text : "Cosfire Chart Quick Start!" }], // we can add multiple title
                    axesX: [{ title : "Country" }],     // we can add multiple xAxis
                    axesY: [{ title : "Population" }],  // we can add multiple yAxis
                    data: [{
                            plotAs: "column",
                            tooltipText: "<b style='color:{color};'>{xLabel}: {y}",
                            points: [
                                { xLabel: "China", y: 431002651 },
                                { xLabel: "India", y: 341002651 },
                                { xLabel: "United States", y: 	331002651 },
                                { xLabel: "Indonesia",  y: 273523615 },
                                { xLabel: "Pakistan", y: 220892340 },
                                { xLabel: "Brazil", y: 212559417 },
                                { xLabel: "Nigeria", y: 206139589 },
                                { xLabel: "Bangladesh",  y: 164689383 },
                                { xLabel: "Russia",  y: 345934462 },
                                { xLabel: "Mexico", y: 428932753 }
                            ]
                        }]
                    });
                    
                chart.render(); // draw the chart
            }

            window.addEventListener("load", createChart);
        </script>
    </head>
    <body>
        <div id='chart-container' style="width:800px;height:300px;"></div>
    </body>
</html>

Done!
Lets open this MyFirstChart.html in a Browser, we will see chart is getting displaced.