Learn the steps for filling the color area between two points in HighCharts

Is it possible to have a color fill between two points on an area chart when clicked? You can view the current chart here.


        $(function () {
            $('#container').highcharts({
                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]
                }]
            });

            // button handler
            $('#button').click(function() {
                var chart = $('#container').highcharts();
                chart.series[0].data[3].update({
                    y:150,
                    marker:{
                        fillColor: 'red',
                    }
                });

                chart.series[0].data[4].update({
                    y:150,
                    marker:{
                        fillColor: 'red',
                    }
                });
            });

By clicking on the "May" point, I am aiming for a chart like the one seen here. Do you think this is achievable?

javascriptchartshighcharts

Answer №1

Absolutely! It can be done.

All that's required is an area chart with aligned null values in the series data:

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'area',
            }
            series: [{
                name: 'Mike',
                data: [null, null, 5, 5, 5, null, null, null] //if there's no "Michelle" data, display "Mike" data
            }, {
                name: 'Michelle',
                data: [2, 2, 5, null, 5, 2, 4, 10]
            }]
        });
    });

Check out the Live Demo here: http://jsfiddle.net/adamb/RXLnQ/

Answer №2

Achieving this is definitely possible by utilizing two sets of data.

During the initial load, one set will contain null data while the other set will have normal data.

When a click event occurs, provide the second set with some data to display the desired result.

For example, you can refer to this example.

Alternatively, an additional series can be added when a button is clicked:

chart.addSeries({
            data: [null,null,null, 150, 150, ],
                   color: 'red'
        });

View the updated fiddle here: http://jsfiddle.net/nnqAb/1/

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

Tips on transmitting and receiving substantial JSON information

As a newbie in the full-stack development world, I am currently on a quest to find an efficient method for transmitting and retrieving large data between my React front-end and Express back-end while keeping memory usage to a minimum. My project involves b ...

javascriptjsonreactjs

$stateParams is not being properly defined when passed to the controller

I am currently utilizing ui-router to transfer an object to another state and controller by using $state.go() However, when I check the console.log for the $stateParams object, it appears as undefined. The object consists of x and y coordinates which ar ...

javascriptangularjsangular-ui-routerundefined

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

myObject loop not functioning properly in Internet Explorer version 10

Could someone please point out what is wrong with this code snippet? HTML: <div id="res"></div> Javascript: var myObject = { "a" : { src : "someimagepath_a.png" }, "b" : { src : "someimagepath_b.png" }, }; va ...

javascriptjsoninternet-explorer-10

If an AngularJS Form Item is hidden with jQuery's hide() method, will it still be validated?

Even though we're in 2020, I'm still working with AngularJS 1.x instead of the newer version due to work requirements. Despite this limitation, I am facing a challenge with setting up a form that requires exclusive-or validation between two field ...

javascripthtmljqueryangularjsangularjs-forms

Leveraging PHP JSON responses for decision-making in jQuery/JavaScript

Recently, a friend shared the following code snippet with me: json : { result: true } success function(data){ if(data.result) { //do something here } else { //do something here } } I'm curious how I can integrate that ...

phpjavascriptjqueryjson

How can I execute JavaScript within a for loop in the server-side code?

protected void Button1_Click(object sender, EventArgs e) { for (int i = 0; i < 100; i++) { Page.ClientScript.RegisterClientScriptBlock(GetType(), "myScript", "<script>alert('hello world');</script>"); } } Is th ...

c#javascriptajax

How is it possible for the igx-expansion-panel to close when there is a nested angular accordion present?

Currently, I am faced with the challenge of closing the igx-expansion-panel within my Angular project. While everything functions smoothly with a standard panel, things get a bit tricky when dealing with nested angular accordion structures using igx-accord ...

javascriptangulartypescriptignite-uiignite-ui-angular

Is it possible to utilize a React component within the DataGrid cell instead of the standard cell types like 'string', 'number', 'date', and 'dateTime' in Material UI?

Using React, Material UI, and TypeScript I am trying to embed a React component into the cell of a DataGrid but have encountered an issue. I have explored custom column types for cells here, however, it only allows me to manage string formats, whereas I ...

javascriptreactjstypescriptmaterial-ui

How can we convert a mixed-case word into one or more words with initial capital letters?

Is there a way to convert caps and spaces to their normal form? For instance, can the word coreControllerC4a be transformed into Core Controller C4a automatically when a function is triggered? ...

javascript

Incorporating new elements onto the page without causing the existing elements to re-render

My challenge involves working with a large array of objects, where each object corresponds to one element. To display these elements on the page, I utilize the map() function, but currently only the first 5 elements are being rendered initially. In order t ...

javascriptreactjs

Create a single line of content for a carousel display

Seeking a solution where I can have a container that slides sideways without stacking in rows, I have exhaustively searched for answers using different keywords like single row, inline, flexbox, and grid but to no avail. Any assistance will be highly appre ...

javascriptcssinline

The query limit issue in Sails JS

I am encountering a 413 (Request Entity too large) error when making a request to a Sails Js app (v0.12). Despite my attempts to raise the request limit in the bodyParser, I have not seen any changes take effect. In config/http.js, I included a customize ...

javascriptsails.jsbody-parser

What is the best method for performing cross-domain queries utilizing ajax and jsonp?

When attempting to send an ajax request to a specific URL, I encountered an error. Below is the code I used: $.ajax({ url: "http://webrates.truefx.com/rates/connect.html?q=ozrates&c=EUR/USD&f=csv&s=n", dataType : 'jsonp', ...

javascriptjqueryajaxcsv

Encountering a Microsoft error while trying to install jsdom with node.js

I'm currently in the process of setting up jsdom on my system. I found a helpful guide at but encountered the following issue: C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Microsoft.Cpp.InvalidPlatform .Targets(23,7): e ...

javascriptnode.jsjsdomnode.js-domains

Retrieving JSON information from a PHP script with AJAX

I am currently experiencing an issue with my PHP script, 'getNews.php'. Despite working correctly in the terminal and returning the expected data, I am encountering difficulties when trying to retrieve this information through JavaScript. <?p ...

javascriptphpjqueryajaxjson

NextJS is throwing an error stating that the function file.endsWith is not recognized as a valid

After upgrading from nextJS version 9.x.x to 12.x.x, I encountered the following error. Any assistance would be greatly appreciated. TypeError: file.endsWith is not a function at eval (webpack-internal:///./node_modules/next/dist/pages/_document.js ...

javascriptnext.js

Display the entire HTML webpage along with the embedded PDF file within an iframe

I have been tasked with embedding a relatively small PDF file within an HTML page and printing the entire page, including the PDF file inside an iframe. Below is the structure of my HTML page: https://i.stack.imgur.com/1kJZn.png Here is the code I am usin ...

javascripthtmlcsspdfiframe

Tips for moving an element to the end of an array

Patients' data is stored in the MongoDB database, and all patients are mapped through on the frontend to display a list. An additional boolean value indicates whether a patient is archived or not. If a patient is archived, it should be displayed at th ...

javascriptnode.jsreactjs

Modify the label contents to reflect the selected file, rather than using the default text

Currently, I am working on customizing my file upload input to enhance its appearance. Everything is going smoothly so far, but I am facing difficulty in finding a suitable jQuery script that can meet my specific requirements. My objective is to have the ...

javascripthtmljquery