Understanding useRef and forwardRef in React — A Beginner’s Guide

When working with React, you often hear about useRef and forwardRef . At first, they can feel confusing: “Why do I need refs when I already have props and state?” This article will walk you through the why, how, and when of refs in React — with simple examples, analogies, and real use cases. 1. What is useRef ? Think of useRef as a sticky note inside your component. Whatever you write on it will still be there even after React re-renders your component. function App() { const inputRef = React.useRef<HTMLInputElement>(null); const focusInput = () => { inputRef.current?.focus(); }; return ( <div> <input ref={inputRef} placeholder="Type here..." /> <button onClick={focusInput}>Focus Input</button> </div> ); } useRef creates a box that holds a reference to the <input> DOM element. inputRef.current po...
Post a Comment

Highcharts: A 10 minutes overview.

A Norway-based company 'Highsoft' offering charting library written in pure javascript. Its a major addon to web applications requires interactive charts. Currently they're supporting many chart types including line, area, column, bar, pie, scatter, bubble, gauge, spline, areaspline and polar etc.

Already Highcharts is providing a descriptive demo page considering all examples (Highcharts Demos). The pupose of the article only to understand maximum aspects in a view.

Features :

Compatible with all major browsers, it also provides features like DateTime support, Export (PDF/ PNG/ JPG / SVG), Print and Zoomablity etc.

Installation:

Its a single file downloadable from (https://www.highcharts.com/). Also packages through npm and Bower are avalable. We may load file on our domain or use CDN version.

Load files from your own domain (Insert in html head)

<script src = "/js/highcharts.js">

CDN Version (Insert in html head)

<script src = "https://code.highcharts.com/highcharts.js">

Highcharts general elements are worth to understand. Then next step is formatting. It helps to mould highcharts as per our requirement.

Below are few very important queries, while working with Highcharts.

How to format Legend?
How to format x-axes?
How to format y-axes?
How to format column?
How to format tooltip?
How to format y-axes stackLabels?
How to colour the columns?
How to add event on columns?

In below image all questions are answered.
Also view complete example in jsfiddle.

Also we'll discuss other aspects of highcharts soon.

Comments

  1. Arun PrasherJuly 17, 2020 at 10:07 PM

    https://stackoverflow.com/questions/48748550/google-chart-horizontal-scrolling

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Install and Manage PostGIS with a Non-Superuser Role

Image
Prerequisite: PostgreSQL Version This guide assumes you are using PostgreSQL version 14 or later, which supports the necessary commands for PostGIS installation and management. Ensure your PostgreSQL server is up-to-date before proceeding. This guide ensures that PostGIS is installed and configured properly for a specific user, such as administrator , while avoiding common issues. 1. Ensure Superuser Access sudo -i -u postgres psql --dbname=financethat 2. Create a Role for PostGIS Management CREATE ROLE administrator WITH LOGIN PASSWORD 'your_secure_password'; GRANT ALL PRIVILEGES ON DATABASE financethat TO administrator; 3. Install PostGIS To install PostGIS on Ubuntu, first ensure you have the required PostgreSQL version installed. Then, use the following commands: sudo apt update sudo apt install postgis postgresql-14-postgis-3 Replace 14 with your PostgreSQL version if different. After installation, enable PostGIS in...
Read more

Leveraging Asynchronous Views in Django REST Framework for High-Performance APIs

As web applications grow, handling a high volume of concurrent requests becomes essential. Traditional Django views, which are synchronous, can slow down the system by tying up resources for each request. Fortunately, starting with Django 3.1, asynchronous views were introduced. By leveraging async views, Django can serve more requests concurrently, improving scalability and responsiveness. Understanding Asynchronous Views in Django Asynchronous views allow Django to handle tasks that involve waiting, like database queries or API calls, without blocking threads. This approach allows the server to handle additional requests in the meantime. In Django, async views use the async and await keywords to enable non-blocking behavior. Example: Fetching Data from an External API Here’s an example of an asynchronous view in Django that fetches weather data from an external API. Instead of blocking while waiting for the API response, Django can handle oth...
Read more

Implementing Throttling in Django REST Framework.

Implementing Throttling in Django REST Framework to Manage High Traffic and Prevent Abuse Introduction In high-traffic applications, it’s essential to protect server resources and ensure fair usage among users. Throttling is a method used in Django REST Framework (DRF) to limit the rate of requests, helping prevent abuse and manage load. In this article, we’ll explore how to implement throttling in DRF, including ways to apply it to specific views and dynamically whitelist IPs. What is Throttling? Throttling controls the rate of requests an API endpoint can receive from a single client. It’s a valuable tool for: Preventing abuse by limiting request rates for each user or IP address. Managing server load by avoiding high request volumes that can overwhelm the application. In Django REST Framework, throttling is easy to configure with built-in classes like UserRateThrottl...
Read more