Modifying the background color using highcharts.js

Question

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...

javascript jquery html css highcharts

Answer 1

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 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 3

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

Answer 4

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

Modifying the background color using highcharts.js

Answer №1

Answer №2

Similar questions

Adding events to a TinyMCE iframe in WordPress

Encountering difficulty when determining the total cost in the shopping cart

What is the best way to fully eliminate the Pixi renderer, stage, and all associated assets

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Populate the content within a div element with specified height and width by utilizing JavaScript and jQuery

Basic email subscriber form using PHP and HTML

"Optimizing the Placement of jPlayer for Your Website

Injecting AngularJS directives and styling elements into the body section of a Twig template using the {% block body %} tag

Creating dynamic JSON endpoints using JSP with Spring MVC

Unique Symbols and Characters in JavaScript

My React application is being loaded by Express regardless of the route I access. What could be causing this issue?

What is the best way to display an image right in the middle of the header?

Easily validate your email with this straightforward form. Completely puzzled

Gather and consolidate all files into a single file using Node.js / JavaScript

Having trouble accessing the ng-model within ng-repeat in the controller of an AngularJS component

When the form is submitted, the values of the items are being reverted back

What is the method to alter the color of an SVG source within an image tag?

Is it possible to automatically access the most recent Beta build through package.json and npm?

Hybrid component that combines static and dynamic elements in Gatsby

Ways to update the select field without having to reload the entire page