{"id":18320,"date":"2025-01-30T10:06:39","date_gmt":"2025-01-30T10:06:39","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=18320"},"modified":"2025-01-30T10:06:39","modified_gmt":"2025-01-30T10:06:39","slug":"stock-data-grouping-interval","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2025\/01\/30\/stock-data-grouping-interval\/","title":{"rendered":"Stock Chart with Custom Time Intervals \u2014 JS Chart Tips"},"content":{"rendered":"

\"A<\/a>Grouping data points into appropriate time intervals is essential for making stock charts<\/a> more readable and insightful. While raw data may be collected at a high frequency, such as every minute, financial analysts and traders often need to view broader trends, where grouping data into 5-minute, 15-minute, 1-hour, 1-day, and other time frames can provide clearer insights. In this edition of JS Chart Tips<\/a>, we will walk you through the process of setting a custom time interval for a stock chart using our JavaScript charting library<\/a>.<\/p>\n

<\/p>\n

Question: How to Set Stock Data Grouping Intervals?<\/h2>\n

Recently, our Support Team<\/a> received a question from a user who wanted to change the default interval of their candlestick chart<\/a>. Specifically, they had data with a 1-minute interval and wanted each candlestick to represent 5 minutes.<\/p>\n

Below is a common scenario when working with grouped time intervals, and we will now demonstrate how to achieve this:<\/p>\n

\"Demonstrating<\/p>\n

Solution: Creating Custom Data Grouping in Stock Charts<\/h2>\n

Overview<\/h3>\n

If you have stock data<\/a> recorded at a short time interval but want to display points grouped into longer periods \u2014 either as a fixed setting or with interactive switching \u2014 this can be easily achieved using the Data Grouping<\/a> feature.<\/p>\n

In our JavaScript stock charts<\/a>, the grouping()<\/code> method lets you control how data is aggregated into larger intervals, allowing you to easily customize how your candlesticks, OHLC<\/a> bars, or data points in other stock chart series<\/a> appear.<\/p>\n

In Detail<\/h3>\n

First, access the grouping()<\/code> object from your stock chart:<\/p>\n

var grouping = chart.grouping();<\/code><\/pre>\n
Second, enable forced grouping to ensure the chart applies your custom settings:<\/p>\n
grouping.forced(true);<\/code><\/pre>\n
Third, define the grouping levels by specifying the desired time unit and interval. In the original customer question, the request was to use a five-minute grouping:<\/p>\n
grouping.levels([{\r\n  unit: 'minute',\r\n  count: 5\r\n}]);<\/code><\/pre>\n
See the complete code enabling this type of stock data grouping below:<\/p>\n
\/\/ create a grouping variable\r\nvar grouping = chart.grouping();\r\n\r\n\/\/ force the grouping\r\ngrouping.forced(true);\r\n\r\n\/\/ set the grouping level to 5 minutes\r\ngrouping.levels([{\r\n  unit: 'minute',\r\n  count: 5\r\n}]);<\/code><\/pre>\n
Of course, you’re more than welcome to use method chaining if you desire:<\/p>\n
chart.grouping().forced(true).levels([{unit: 'minute', count: 5}]);<\/code><\/pre>\n
Examples<\/h3>\n
Check out an example of a JS candlestick chart with a 5-minute interval, and feel free to experiment further with its code and visualization:<\/p>\n