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

Question

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?

javascript charts highcharts

Answer 1

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

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 3

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/

Answer 4

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/

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

Answer №1

Answer №2

Similar questions

Navigating through embedded arrays in Angular

Can you explain the distinction between using <router-view/> and <router-view></router-view>?

Exploring React JS Subdomains

Only scroll the div if it is not within the visible window

Utilize Google's Places Direction API Autocomplete feature to pre-select the starting location

Using Node.js to display the outcome of an SQL query

Switching Next.js route using pure JavaScript

Jest identifies an open handle when working with an Express application

The success method in the observable is failing to trigger

What could be causing the console to display undefined?

AngularJS - let's make pagination more interactive by adding an active class to the current page

Problem with TypeScript involving parameter destructuring and null coalescing

AngularJS - development of a service entity

Issues with the Textarea StartsWith Function Being Unresponsive

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

What is the best way to centrally align a Card while keeping the text left-aligned?

Exploring the Utilization of FormData and form.serialize within the Data Parameter of Ajax Jquery

The ng-model remains unchanged when the <select> element is modified using JavaScript

Hover effect for changing image source not functioning as anticipated

JavaScript effectively divides multiple child dropdowns with the main dropdown, thanks to Bootstrap innovation