Modifying the background color using highcharts.js

I am attempting to customize the background colors of a highcharts scatter plot. While I can easily change the color of a specific section using the code provided, my goal is to apply multiple colors to different ranges within the same plot. Specifically, I want to shade the area from 60-100 with dark gray, highlight the area from 100-120 with light gray, and cover the range of 40-60 with another hue of light gray. Since I am creating a confidence plot, I believe this should be a common feature but have been unable to find a solution thus far.

Using the following code snippet will add a light gray background to the plot:

 plotBands: [{
       from: 60,
       to: 100,
       color: '#d9d9d9'
    }]

Check out the Fiddle for reference: Fiddle Here...

Answer №1

To update the plotBands array, simply pass another object to it: Check out the revised example here: http://jsfiddle.net/osevj9m3/2/

plotBands: [{
  from: 60,
  to: 100,
  color: '#d9d9d9'
}, 
{
  from: 100,
  to: 120,
  color: '#333'
},
{
  from: 120,
  to: 140,
  color: '#666'
}]

Answer №2

To update your plotBands, simply make the following adjustments:

    plotBands: [{
        from: 60,
        to: 100,
        color: '#d9d9d9'
    },{
        from: 40,
        to: 10,
        color: '#d0d9d9'
    }],

Best regards, -S

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

Exploring MongoDB's Aggregation Framework: Finding the Mean

Is there a way to use the Aggregation Framework in MongoDB to calculate the average price for a specific Model within a given date range? Model var PriceSchema = new Schema({ price: { type: Number, required: true }, date: { ...

The JQuery script has not been initialized, causing the function to not activate

I keep encountering this error message: Uncaught ReferenceError: toggleOptionsVisibility is not defined at HTMLSelectElement.onchange Here's the HTML code I'm working with: <div> <label asp-for="Type"></label&g ...

"Enhance the visualization of your data with Apexcharts by accurately coloring the columns

When attempting to color the graphic using an array, only one color is applied to all three columns, despite declaring a different color for each column. options: { chart: { type: 'bar', id: 'chart', }, colors: ['#3 ...

Chosen option in jQuery dropdown menu

I am currently working on a dropdown menu that changes the window.location.href on selection. However, I am wondering how I can keep the selected value highlighted when the page reloads? <div class="iPhoneNav"> <select class="iPhoneDropdown ...

"(PHP)WordPress produces a dynamic menu that adapts to different screen sizes

I recently created a menu on my WordPress site [ and I'm facing an issue with making it display vertically in a responsive way. The code in header.php is as follows: <!-- header --> <header> <div class="overNavPanel"> ...

Retrieving display format or formatted value from an object with Moment.js

I am currently working on a project using Angular and Material2. Within this project, I have created a moment object in the following way: myDate = moment.utc(new Date()).format("YYYY-MM-DD HH:mm:ss"); This object is then passed as an argument to ano ...

Modifying computed object in Vue: A step-by-step guide

My issue involves a simple selection of months: <select v-model="month" v-on:change="dateChanged('month', month)"> <option v-for="(month, index) in months" :value="index">{{ month }}</option> </select> The primary da ...

What is the best way to break out of a function halfway through?

What are your thoughts on using nested if statements? $scope.addToCart = function () { if (flagA) { if (flagB) { if (flagC) { alert('nononono!'); return; } } } e ...

Unable to save a URL link in MySQL database using JSON and PHP

I am seeking some insightful advice regarding my college assignment. This time around, I have to create yearbooks using Phonegap and it's my first experience working with AJAX, JSON, and JQuery Mobile. Instead of uploading an image directly into the ...

Utilize express compression in Node.js to compress JSON data from the REST API endpoint

I recently developed a small RESTful application using Node.js. I attempted to compress the JSON data returned by an API request using Express and compression, but unfortunately it did not work as expected. var express = require('express'); var ...

Validation of New Relic License Key

Is there a way to verify the validity of a provided New Relic license key in a JavaScript application? I have searched through the documentation but did not come across any API endpoint for this purpose. UPDATE: Just to clarify, we do not have access to ...

Maximizing Angular and Require's Potential with r.js

I'm facing some challenges while setting up r.js with require in my Angular application. As I am new to AMD, solving this issue might be a simple task for someone experienced. However, I need to maintain the current directory structure as it allows me ...

Updating the div#content dynamically with Jquery without the need to refresh the page

After spending countless hours on this forum, I have yet to find a solution that perfectly fits my needs, so I will pose my question. Here is the gist of what I am attempting to accomplish: When the page loads, the default page fades in and displays. Wh ...

Ensuring the existence of a MySQL database prior to executing a Node.js application

I am currently working on a Node.js/Express application that communicates with a MySQL server using Sequelize. I want to make sure that a particular database is created before the app starts running when using npm start. I think I need to create a one-ti ...

Using node-native to authenticate in MongoDB is a surefire way to ensure the

I'm currently facing an issue while attempting to save a document in MongoDB within my Nodejitsu/MongoHQ application. Everything works perfectly locally, but the MongoHQ database requires authentication and it fails even with the correct user/password ...

Color key in square shape for graph legend

I am looking for legend colors in square shape, but I don't want them to appear as square boxes on the graph. https://i.stack.imgur.com/Of0AM.png The squares are also showing up on the graph, which is not what I want. https://i.stack.imgur.com/Az9G ...

Ways to incorporate a focus event into a template

I'm currently working on implementing autocomplete functionality in the search box on my homepage. To achieve this, I have included an onfocus event for the template to execute a jQuery command targeting the source elements. The method I used to add j ...

Transforming date and timezone offset into an isoDate format using moment.js

When retrieving data from the API, I encounter Date, Time, and Offset values in separate columns. My goal is to obtain an ISO date while maintaining the original date and time values. const date = "2019-04-15" const time = "13:45" const ...

Refresh the Rails HTML table with new data by incorporating ajax requests and vanilla JavaScript

I'm struggling to find a solution without using jQuery in my current scenario. How can I refresh a partial on my page without reloading the entire page? Within my new.html.erb file, there's a button that triggers a JavaScript function each time ...

What is the best way to showcase React Components in a inline format?

I'm attempting to place multiple React Components in the same line so that I can scroll through them later. Unfortunately, React and Material UI are not cooperating. The Card Components consist of a standard div element with text and an image inside. ...