Steps to make a highcharts area graph with emphasis on the top section

By default, the area in highcharts highlights the bottom area.

https://i.sstatic.net/Auo2V.png

However, I am looking to highlight the top area instead.

https://i.sstatic.net/xAHXx.png

Is there a recommended approach to achieve this?

After exploring this demo, it seems that adjusting the threshold value to 250 can yield similar results (as seen in My Expectation)

The only workaround I have considered is:

  1. Determining the maximum y-value among all data points.

  2. Setting MAX = k * y_max. (k being a custom-defined factor, for example, 1.2; to enhance accuracy, considering y_min to dynamically determine a proper k is also necessary)

  3. Utilizing the following configuration.

yAxis: {
   max: MAX 
},
plotOptions: {
    series: {
        threshold: MAX 
    }
}

Nevertheless, this method requires some JavaScript computations and I am curious if highcharts natively supports this feature.

UPDATE:

Clarifying my initial query, I aim to accommodate 3 types of areas:

  1. Enclosed within Upperbound and Lowerbound
  2. Below the lower bound
  3. Above the upper bound

While I managed to implement the first type using arearange, it does not handle missing upper/lower bounds gracefully; eliminating the thresholds entirely if one bound is absent.

Does a solution exist to evade manual computation of the threshold setting?

javascripthighcharts

Answer №1

By utilizing CSS, you can achieve a design similar to the image you provided:

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#ff0000',
        fillColor: '#ffffff',
        fillOpacity: 1
    }]
});
.highcharts-plot-background {
  fill:rgba(255,0,0,0.5);
}
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

To achieve an almost identical result, you can use `threshold` along with `negativeColor`:

Highcharts.chart('container2', {
    chart: {
        type: 'area'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: "#FF0000",
        fillColor: '#f00000',
        fillOpacity: 0.5,
        threshold: 300,
        negativeColor: '#f00000',
        negativeFillColor: 'rgba(255,0,0,0.5)'
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container2" style="height: 400px"></div>

You can view a working example in this fiddle: http://jsfiddle.net/beaver71/0sameLb6/

Answer №2

Big thanks to @TorsteinHonsi!

I recently raised an issue, and received a prompt response from @TorsteinHonsi who quickly made a modification. The `area` feature will soon support `-Infinity/Infinity` values.

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

JavaScript seems to have difficulty correctly parsing objects from JSON

Having trouble populating a Repeat Box with objects from a JSON document. Despite my efforts, it keeps duplicating the first item instead of adding each one individually. Any ideas on what might be causing this issue? Below is the code I am currently usin ...

javascriptjsonsmartface.io

"Embracing AngularJs with the power of SocketIo

Can someone please help me with the code snippet provided below? This code is sourced from: http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets app.factory('socket', function ($rootScope) { var socket = io.connect(); return { ...

javascriptangularjssocket.io

showcasing a map on an HTML webpage

Seeking advice on integrating a map feature in HTML to mark store locations. Working on an app for a business community and need help with this specific functionality. Your assistance would be greatly appreciated! ...

javascripthtml

Enhancing the speed at which Discord fetches usernames for numerous users using discord.js

Below is the code snippet: const memberGroup = ["801555002664419350", "801555002664419351", "801555002664419352", "801555002664419353", "801555002664419354", "801555002664419355", "8015550026 ...

javascriptnode.jsarraysdiscord.js

Executing functions on React components with no render method

Currently, I am in need of a component that will handle app settings. This particular component, named Settings, utilizes the useState() hook to store state values such as the primary color scheme. I aim to have a single instance of this Settings componen ...

javascriptreactjstypescript

AngularJS provides the ability to use cookies when working with an EventSource

I'm exploring the idea of using EventSource to send server events to the client, but I want the client to be able to distinguish itself so it only receives its own events. I've been attempting to utilize cookies for this purpose, but for some rea ...

javascriptangularjshtmlcookieseventsource

Utilizing a switch statement for form validation

Currently, I am in the process of creating a form validation that involves two conditions for validation. I'm considering using a combination of switch case and if else statements. Would this be an appropriate approach or is it generally discouraged? ...

javascriptreactjsif-statementswitch-statement

Upon successful authentication, the WebAuthenticationBroker.authenticateAndContinue function does not activate the app

I'm attempting to implement Facebook, Twitter, and Google login using WebAuthenticationBroker.authenticateAndContinue. The authentication page is displayed successfully, but once the authentication is complete, the activated event is not triggered and ...

javascripthtmlwindowswindows-phone-8.1winjs

What steps can I take to stop a default route from adding headers to a particular route in Express.js?

Below are my Express.js route definitions: // Defining specific routes from a route file routes.use(this.initialize.bind(this)); routes.use(this.isAuthenticated.bind(this)); routes.use(this.isAuthorized.bind(this)); if (Route.METHOD == 'POST') { ...

javascriptnode.jsexpressrouteshttp-headers

What could be causing the User object in the auth0/nextjs useUser hook to have missing properties?

The user object retrieved using the useUser hook from auth0/nextjs package seems to be missing some important properties: { "nickname": "example", "name": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedbc6dfd3ced2dbfec7 ...

javascripttypescriptnext.jsauth0

Steps to expand all Bootstrap 5 accordions at once without collapsing any of the currently open ones

I own an accordion How can I expand all accordion items simultaneously by clicking on a single item? Consider the following scenario: Accordion Item #1 is open Accordion Item #2 is closed Accordion Item #3 is closed If we click on item #2 or #3, all ...

javascriptbootstrap-5

Conditional statement based on the background color

Despite researching various topics on using background colors in if statements, I have yet to find a satisfactory solution. Whether I define an element as a variable beforehand or use rgb/rgba values, my code does not produce the desired results; it always ...

javascriptjqueryhtmlcss

Waiting with Protractor's browser.wait can lead to Angular timeouts

I've been working on this code snippet: browser.sleep(5000).then(function() {console.log('rotel:' + browser.rootEl)}); browser.ignoreSynchronization = true; browser.rootEl = 'div#overview'; browser.driver.switchTo( ...

javascriptangularjsseleniumselenium-webdriverprotractor

Can we modify the styling of elements in Angular based on an object property?

I have a class named Task with the following properties: export class Task { name: string; state: number; } Within my component.ts file, I have an array of objects consisting of instances of the Task class (tasks). When displaying them in the tem ...

javascriptangularfrontendangular-directive

Creating a PDF document with multiple pages using a PHP loop, integrating with AJAX, and utilizing the m

Looking for assistance with a plugin development project involving PDF generation using AJAX. The challenge lies in generating multiple PDFs for each user within a loop. The goal is to create PDFs with multiple pages for individual users. If that's n ...

javascriptajaxwordpresspdf

Incorporating dynamic images into Laravel using Angular

I am currently trying to dynamically input the src value of an image using Angular. Below is the code I have written : HTML : <div ng-app="myApp" ng-controller="MyCtrl"> <img src="{{asset('assets/img/'.'/'. @{{ item.name ...

javascriptphpangularjslaravel

Why is it that injecting javascript within innerHTML seems to work in this case?

According to the discussion on this thread, it is generally believed that injecting javascript in innerHTML is not supposed to function as expected. However, there are instances where this unconventional method seems to work: <BR> Below is an examp ...

javascripthtmlajaxdom

Leveraging object values from ng-repeat as parameters in JavaScript

I need help with a code snippet I'm working on. Here is what it looks like: <tr ng-repeat="obj in objs"> <td onClick = "someFunction({{obj.val1}})">{{obj.val2}}</td> <td>{{obj.val3}}</td> </tr> While the colum ...

javascriptangularjs

What's the best way to execute multiple actions within a single gulp task?

Is there a way to execute multiple actions within one gulp task? I have tried using event-stream's merge feature following the example in How to perform multiple gulp commands in one task, but it doesn't work properly when combined with the del p ...

javascriptnode.jsnpmgulp

What is the best way to attach 'this' to an object using an arrow function?

Consider having an object named profile which consists of properties name and a method called getName (implemented as an arrow function). profile = { name: 'abcd', getName: () => { console.log(this.name); } } I am interes ...

javascriptthisjavascript-objectsarrow-functions