Minimize the quantity of data points displayed along the X-axis in a highcharts graph

After making an API call, I received data for a Highcharts graph consisting of an array of datetimes (in milliseconds) and corresponding values (yAxis). The data is fetched every 15 minutes and displayed on a mobile device. When viewing the data monthly, I realized there are too many datapoints to effectively visualize (4*24*30). I am interested in only visualizing one datapoint per day, which would be an average of those 4 quarters * 24 datapoints. I have tried various xAxis options such as minRange, minTickInterval, tickAmount, and tickInterval without success. Are there any other suggestions?

angulartypescripthighchartsnativescript

Answer №1

When utilizing Highcharts Stock, you can accomplish this using the dataGrouping feature. Highcharts Stock includes all the features of Highcharts, so if you prefer not to use Stock, you can simply utilize the Highcharts constructor.

plotOptions: {
  series: {
    dataGrouping: {
      forced: true,
      units: [["day", [1]]]
    }
  }
},

API references:
https://www.highcharts.com/docs/stock/data-grouping https://api.highcharts.com/highstock/plotOptions.series.dataGrouping

Live demo:
https://stackblitz.com/edit/highcharts-angular-stock-ydnfmd?file=src/app/app.component.ts

If you do not implement dataGrouping, your only option would be to manually filter and parse your data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring information between AngularJS and Angular applications

Having two applications on localhost: http://localhost/testsite (Angular js app) http://localhost:4200 (Angular app) Seeking assistance in sharing data from Angular JS to Angular application. Any guidance would be appreciated. Thank you. ...

angularangularjs

Angular2 and ReactiveX: Innovative Pagination Strategies

Currently, I am diving into the world of ReactiveX. To make things easier to understand, I have removed error checking, logging, and other unnecessary bits. One of my services returns a collection of objects in JSON format: getPanels() { return this. ...

paginationtypescriptangularrxjsreactivex

Angular 2 GET request returns a 404 error

I have been attempting to reproduce the ngPrime datatable demo from this Github repository. Currently, I am working with the most recent version of Angular (4) and using angular-cli in development mode. Placing a JSON file into my app folder where the serv ...

angulartypescript

Tips for accessing touch events within the parent component's area in React Native

I implemented the code below in my React Native app to disable touch functionality on a specific child component. However, I encountered an issue where the touch event was not being detected within the area of the child component. How can I fix this prob ...

javascriptreactjstypescriptreact-native

Extend the row of the table according to the drop-down menu choice

I am working on a feature where a dropdown menu controls the expansion of rows in a table. Depending on the option selected from the dropdown, different levels of items need to be displayed in the table. For example, selecting level 1 will expand the first ...

javascriptangulartypescript

What is the reason behind TypeScript not stating "When comparing a string to a null value, the condition will always return 'false'?"

When comparing a string to a number, an error and warning are generated. But why is there no warning when comparing a string to null/undefined? In this case, the type 'smth' is still narrowed to never without any warning displayed. The strictNul ...

typescript

Higher-Order Component integrated with HTMLElement

Check out this complex code snippet I created: export type AdvancedHoverElementProps<TElement extends HTMLElement> = React.HTMLProps<TElement> & { hoverDuration: number, onHoverChanged: (isHovering: boolean) => void }; export ...

reactjstypescript

The type 'number[]' is lacking the properties 0, 1, 2, and 3 found in the type '[number, number, number, number]'

type spacing = [number, number, number, number] interface ISpacingProps { defaultValue?: spacing className?: string disabled?: boolean min?: number max?: number onChange?: (value: number | string) => void } interface IFieldState { value: ...

javascriptreactjstypescript

Angular and RxJS can be set up to delay the next call from BehaviorSubject in situations where there are multiple

Within my Angular application, I maintain a state using a service that stores the data as a BehaviorSubject. Whenever new data is received from the server, the next function is called to update the existing data and notify all subscribers. PseudoCode: ...

angularrxjs

Utilize HighCharts to seamlessly implement multiple series with the help of AJAX requests

I am facing an issue with plotting the performance results on HighCharts using AJAX. The problem lies with the .addSeries API call not functioning correctly. I need assistance in determining if my approach is correct. $(function () { $('#chart3&a ...

javascriptjqueryajaxhighcharts

Dynamic routing with ngIf in Angular 2's router system

Is there a way to use *ngIf with dynamic router in Angular? Let's say I have a top navigation component with a back button, and I only want the back button to be visible on the route 'item/:id'. I tried using *ngIf="router.url == '/ite ...

javascriptangulartypescriptangular-routing

Ways to eliminate duplicate objects from an array using Angular 6

I'm having trouble removing duplicate value objects in an array and it's not working as expected. I believe the duplicate function is functioning correctly, but the changes are not being reflected in the li list. Can you pinpoint where I need to ...

angulartypescriptangular5angular6angular2-services

"Encountering issues with the production build of angular2-flash-messages

I have integrated angular2-flash-messages into my Angular (4) application. I included it in app.module.ts as shown below: import { FlashMessagesModule } from 'angular2-flash-messages'; imports: [ FlashMessagesModule, ], Everything works f ...

buildproductionflash-messageangular

Expanding a JSON data structure into a list of items

In my Angular service script, I am fetching customer data from a MongoDB database using Django: getConsumersMongodb(): Observable<any> { return this.httpClient.get(`${this.baseMongodbApiUrl}`); } The returned dictionary looks like this: { &q ...

javascriptjsondjangoangulartypescript

Is there a way to insert a Highchart Image into a spreadsheet in Excel?

Struggling to insert a Highchart's chart image into an Excel file? The goal is to utilize the current "Export Excel" button on a website to export a static image of the Highchart displayed on the webpage directly into an excel spreadsheet. Provided be ...

angularhighchartsexceljs

What is the process for displaying objects within an object using HTML?

I'm developing an app using Angular and Node.js. I have a complex data structure where one object (order) contains a list of objects (items), which in turn include another list of objects (product IDs). My goal is to properly display all this data wit ...

htmlnode.jsangularngfor

Exploring the world of command line testing with Angular2, Typescript, Karma, and Jasmine

If you're looking to run unit tests for Angular2 using Jasmine from the command line with Karma, you might have encountered some challenges. Various configurations have been tried, but none seem to work seamlessly when combining Angular2, SystemJs, Ty ...

angularjsangularkarma-jasmine

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

Currently, I am attempting to set an initial state (items) to an array of objects or retrieve the same from localStorage. However, I am encountering the following error. Type 'number' is not assignable to type '{ id: string; price: number; ...

javascripttypescriptreduxnext.js

Unexpected behavior with onKeyPress in React-Native Windows resulting in missing key press events

Currently, I am working on a Windows app using react-native version 0.54.0. For one of the functionalities, I have incorporated a TextInput element and would like to use onKeyPress. Here is my code snippet: <TextInput ref = { this.setTextInputRef } on ...

typescriptreact-native

What is preventing this from being a function?

It appears that the authenticationProvider is missing for some reason. @autoinject() export class ProviderManager implements AuthenticationManager { constructor( private container: Container ){ } public authenticate( creds: Credentials ): Promis ...

typescriptaurelia