How to create candle stick graph for stock chart in JavaScript?

1 min read

How to create candle stick graph in stock chart?

JavaScript Stock Chart is a well-crafted, easy-to-use financial charting package to track and visualize the stock price of any company over a specific period using charting and range tools.

Let’s see, how to create simple candle stick graph.

Step-1: Adding Script and Style files

Include ej2.min.js script and material.css files in your sample. It contains all dependencies to render the candlestick chart.

candle.html
 
<html>
 
<head>
 
   // Adding ej2.min.js CDN link
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
   // Adding Style file
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
 
 
</head>
</html>

Step-2: Creating Chart Container

Create a container for candlestick chart to get render.

candle.html
 
<html>
<body>
    // Chart container
    <div id="container"></div>
</body>
</html>

Step-3: Creating candle stick chart

Basic Candle Stick chart

You can get stock data from below link.

Candlestick data

Here are the steps for creating the candlestick chart:

Create stock chart instance by using new ej.charts.StockChart().
Get the json data using require method.
Assign the data using dataSource property in series.
Set the chart type to Candle using type property in series.
Now append the chart instance to the container to render the candlestick chart.

// candle.html
 
<html>
 
<head>
 
   // Adding ej2.min.js CDN link
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
   // Adding Style file
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
 
   // Adding candle.js script file
    <script src="candle.js" type="text/javascript"></script>
 
 
</head>
 
</html>

// candle.js
 
var candleStickData = require("./data.json");
 
var stockChart = new ej.charts.StockChart({
    primaryYAxis: {
        title: 'Stock Prices'
    },
    primaryXAxis: {
        title: 'Months'
    },
    enableSelector: false,
    series: [
        {
            dataSource: candleStickData,
            type: "Candle"
        }
    ]
});
stockChart.appendTo("#container");

candlestick chart basic demo

Step-4: Customizing horizontal bar chart

Adding Chart Title

Add title to the chart, to provide quick information about the data plotted in the chart.

var stockChart = new ej.charts.StockChart({
    title: 'AAPL Stock Price'
});
stockChart.appendTo("#container");

candlestick with title

Customizing Bull and Bear Colors

You can customize the bear and bull colors using bearFillColor and bullFillColor properties.

var stockChart = new ej.charts.StockChart({
    series: [
        {
            bearFillColor: "#0a0af5",
            bullFillColor: "blue"
        }
    ],
});
stockChart.appendTo("#container");

candle-with-bear-bull

Candlestick with volume

Allows you to analyze both price action and volume at a glance using stock chart.

var candleStickData = require("./data.json");
var stockChart = new ej.charts.StockChart({
    rows: [{ height: '30%' }, { height: '70%' }],
    axes: [
        {
            name: "yAxis1",
            rowIndex: 1,
        }
    ],
    series: [
        {
            dataSource: candleStickData,
            type: "Candle", yAxisName: 'yAxis1'
        },
        {
            dataSource: candleStickData,
            type: "Column",
            yName: "volume",
        }
    ],
});
stockChart.appendTo("#container");

candlestick chart with volumn

Online demo sample for candlestick with volume

Conclusion

I hope you enjoyed learning about how to create candle stick graph for stock chart in JavaScript.

You can refer to our JS Stock Chart's feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JS Stock Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)