Area range in a column plot using Highcharts

Is there a way to set the area range (blue horizontal bar) only on the red bar by adjusting its width? I've tried using plot bands, but they cover the full width of the x-axis. Can anyone offer a solution?

In my latest attempt, I successfully set the area range (blue horizontal bar), but it added an extra entry "1" on the X axis. I want to maintain only the initial entry "Omburu" with the same layout of yellow, orange, and red bars, along with an additional blue horizontal bar specifically on the red bar between two values according to the "Puissance kW" scale.

Here is the JSFiddle link for reference: https://jsfiddle.net/poloh11/1qzfgopy/11/

Thank you!

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

{
    name: 'Range',
    data: [
        [1000, 1500],[1000, 1500]
    ],
    type: 'arearange',
    lineWidth: 0,
    color: Highcharts.getOptions().colors[0],
    fillOpacity: 0.3,
    marker: {
        enabled: false
    },
    yAxis: 1
}

Answer №1

Try using the columnrage series instead. It shares key properties with the column series (such as pointRange, pointPadding, etc.) that allow for similar adjustments. Below is a configuration that has worked well for me:

{
  name: 'Range',
  data: [
    [1000, 1500]
  ],
  type: 'columnrange',
  lineWidth: 0,
  color: 'rgba(149,206,255,0.7)',
  marker: {
    enabled: false
  },
  yAxis: 1,
  pointPlacement: 0.3,
  pointRange: 0.33,
  borderWidth: 0
}

Check out the live demo here: https://jsfiddle.net/BlackLabel/9czvmhsx/

For more information, refer to the API reference: https://jsfiddle.net/BlackLabel/9czvmhsx/

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

Adding a fresh dependency to the current package.json file

Introduction: I am relatively new to JavaScript and have encountered a basic issue regarding adding dependencies to an existing JavaScript project. Despite double-checking the installation instructions, I seem to have encountered some errors in my terminal ...

How can I add margins to a Bootstrap v5 column that spans the full height and width of the content?

In this scenario, I have two rows and two columns in each row. My goal is to make the yellow blocks take up all available space in the column while having a margin. However, currently the margin disrupts the alignment of the yellow content. https://i.ssta ...

Tips for fetching updated data in React.js using useContext after applying a filter

I have a React.js component that performs various filtering actions when a button is clicked. Here is the code I have written: import React, { useContext } from 'react'; import { ModelsContext } from "../context/ModelsContext"; const F ...

Obtaining the index of items that are returned by using the limit and sorting by descending CreateAt

My first experience with Parse has been great so far. I've successfully worked on reading and writing data. Now I am faced with a seemingly simple task, but in the Parse context, it feels like a challenge to implement and my usual search skills are n ...

Setting up a custom function for the cancel button in Angular X-editable

Can this be done? I've got a code snippet that resembles the following: <div class="popover-wrapper"> <a class="glyphicon glyphicon-time" ng-if="activity.type === 'continuous'" ng-style=" { 'border': 'none', ...

Communication between the Node development server and the Spring Boot application was hindered by a Cross-Origin Request

Here is the breakdown of my current setup: Backend: Utilizing Spring Boot (Java) with an endpoint at :8088 Frontend: Running Vue on a Node development server exposed at :8080 On the frontend, I have reconfigured axios in a file named http-common.js to s ...

Generate JSON dynamically using a foreach loop

I am utilizing the jquery flot charts library to visualize my data. Take a look at this example JSFiddle I created demonstrating how the JSON structure required for the chart should be. The data I am working with is sourced from a MySql stored procedure a ...

"Vanishing Act: Google Maps Markers in React Mysteriously Disappear upon

Struggling with the react-google-maps module, particularly when it comes to markers and component re-rendering. Here's the issue: Initially load page with map and a few markers (all good) Click on a tab in the nav-bar -> page switches content in ...

The SEMrush API is not displaying an 'Access-Control-Allow-Origin' header on the requested resource

When attempting to utilize the SEMrush API, I made a request using jQuery as shown below: $(document).ready(function() { $.get( 'https://api.semrush.com', { type: 'phrase_this', key: ' ...

Show off the images once they have finished loading completely?

Is there a way to ensure that the image is shown on the webpage only once it has been completely loaded? <ul id="listcontainer"> <li class="li1"> <img src="images/m1.png"> </li> </ul> ...

What is the method for transferring form data to a different page?

Currently utilizing AngularJS version 1.5.6 and looking for guidance on properly passing form data using $location.path. Below is my code snippet for Page A: <form> ... <button type="submit" ng-click="submit(formData)"> ...

struggling to determine the connection status between tables (Many-to-many or one-to-one)

Seeking assistance: I am working with two tables (member, event) where each member attends multiple events and each event has multiple attendees. Do these relationships represent a many-to-many or one-to-one relationship? ...

Using Zombie.js to simulate clicking on a Javascript link

I am currently using Node.js in combination with Zombie.js for web scraping. There are certain pages on which I need to interact with JavaScript links. For instance, consider the following page: http://www.indotrading.com/company/berkat-jaya-electronics. ...

Keep running AJAX operations using setTimeout even when the browser window has been closed

I have set up a PHP page that sends an AJAX request to another PHP page containing a casperJS script, which is triggered by a button click and runs every 60 seconds. My goal is to be able to close the browser window while still allowing the AJAX requests ...

Differences between Angular's $injector and Angular's dependency injectionAngular

As a newcomer to Angular, I am exploring the use of $injector and its get function to retrieve specific services. For instance: app.factory('$myService', function($injector) { return { ... var http = $injector.get('$http&apos ...

How can I effectively save data to a session using connect-redis?

I am looking to save the username of an account into session storage. I am currently using node.js with the expressjs framework and have attempted to utilize connect-redis for storing sessions, following a tutorial on expressjs. Can someone please guide ...

How does assigning a checkbox's value as 'undefined' result in the addition of ng-invalid?

I'm facing an issue with a checkbox in my Angular project. The checkbox has a false value of undefined, and even though it's not marked as required, the form doesn't validate when I check and uncheck it. This is because the class ng-invalid ...

WordPress API Encounters a 400 Error with OAuth

While experimenting with the WordPress Rest API, I decided to download a plugin called WP OAuth Server by Justin Greer and managed to set up my own OAuth connection. However, I encountered an issue where I received Error 400 indicating that The grant type ...

Transforming a pair of lists into JSON format

I'm currently working on converting two lists into JSON format. Let's take a look at an example: list1 = ['a','b','a'] list2 = ['q','r','s'] The conversion should result in: [{ " ...

Error alert: The "moment" reference is absent when utilizing moment in Laravel alongside Vue.js

Using Laravel 5, I have installed Moment.js through the npm install command. I am attempting to incorporate it into one of my views with Vue.js, but no matter what I try, I keep getting the error "moment is not defined." If I use require, I get "require is ...