illuminate the area chart lines when they intersect in highcharts

There's a specific area in my highcharts creation that I'm struggling with. Whenever one line crosses over another, the color becomes lighter. How can I keep the line color consistent, even when highlighting it on hover?

Also, I'm looking to change the tooltip color to match the line color. Any suggestions?

https://i.sstatic.net/adyVD.jpg

Take a look at my code below:

$(function () {
  var marker = {
        radius: 4,
        fillColor: '#FFFFFF',
        lineWidth: 2,
        symbol: 'circle',
        lineColor: null // inherit from series
      };

  var chart = new Highcharts.Chart({
    credits: { enabled: false },
    chart: {
      renderTo: 'container',
      type: 'area', 
      width: 600,
      height: 400
    },
    title: { text: 'Title', x: -20 //center
            },
    subtitle: {text: 'Subtitle', x: -20 },
    //title: { text: null },
    xAxis: {
      categories: [
          'NOV 11' ,
          'DEC 11' ,
          'JAN 12' ,
          'FEB 12' ,
          'MAR 12' ,
          'APR 12' ,
          'MAY 12' ,
        ],
        gridLineColor: '#DCEBEF',
        gridLineWidth: 0.5,
        lineColor: '#ffffff',
        lineWidth: 1
        //gridLineDashStyle: 'dash'
    },
    legend: {
      enabled: false
    },
    yAxis: {
      title: {
        text: null
      },
      gridLineColor: '#DCEBEF',
      lineColor: '#ffffff',
      lineWidth: 1,
      gridLineDashStyle: 'dash'
    },
    tooltip: {
      formatter: function() {
          return this.y;
      },
        backgroundColor: 'Grey',
        borderWidth: 1,
        borderColor: '#AAA',
        style: {
            fontWeight: 'bold',
            color: 'White'
        }
    },
    plotOptions: {
      area: {
        fillOpacity: 0.08
      }
    },
    series: [{
      name: null,
      lineWidth: 2,
      color: '#FA918C',
      marker: marker,
      data: [ 500, 500, 800, 1500, 1250, 800, 1150,],
        zIndex: 2,
        fillColor: {
                    linearGradient: [0, 0, 0,250],
                    stops: [
                        [0, 'rgba(250,145,150,0.5)'],
                        [1, 'rgba(255,255,255,0.5)']
                    ]
                }
    },
    {
      name: null,
      lineWidth: 2,
      color: '#674313',
      marker: marker,
      data: [ 1500, 500, 800, 1500, 1050, 1800, 150,],
        zIndex: 2,
        fillColor: {
                    linearGradient: [0, 0, 0,250],
                    stops: [
                        [0, 'rgba(250,145,150,0.5)'],
                        [1, 'rgba(255,255,255,0.5)']
                    ]
                }
    },
      {
      name: null,
      lineWidth: 2,
      color: '#87BCC2',
      marker: marker,
      data: [ 700, 950, 1100, 2000, 1650, 900, 1250,],
      zIndex: 1,
      fillColor: {
                    linearGradient: [0, 0, 0, 250],
                    stops: [
                        [0, 'rgba(135,188,194,0.5)'],
                        [1, 'rgba(255,255,255,0.5)']
                    ]
                }
    }
      ]
  });
});

Check out my fiddle here: http://jsfiddle.net/tyz25j1p/3/

Any assistance would be greatly appreciated

javascripthighcharts

Answer №1

Regarding the first question, @davcs86's suggestion is effective if you intend to reveal them on mouseover. However, if you prefer to keep the lines unobscured, the best approach would be to separate them into a distinct series and adjust the zIndex after the area series.

In response to the second question, a simpler method to define the background color is to utilize the tooltipRefresh event and configure it based on the selected series:

chart: {
      renderTo: 'container',
      width: 600,
      height: 400,
      type: 'area',
      events: {
        tooltipRefresh: function(e) {
          if (!e.target.hoverSeries) return;
          $('.highcharts-tooltip>path:last-of-type')
            .css('fill', e.target.hoverSeries.color);
        }
      }
    }

Functioning code provided below:

<!DOCTYPE html>
<html>

<head>
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c3d8dcccdbd0e99a87998799">[email protected]</a>" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
</head>

<body>
  <div id="container" style="height: 400px; width: 600"></div>
  <script>
    $(function() {
      var marker = {
        radius: 4,
        fillColor: '#FFFFFF',
        lineWidth: 2,
        symbol: 'circle',
        lineColor: null // inherit from series
      };

      var chart = new Highcharts.Chart({
        credits: {
          enabled: false
        },
        chart: {
          renderTo: 'container',
          width: 600,
          height: 400,
          events: {
            tooltipRefresh: function(e) {

              if (!e.target.hoverSeries) return;

              $('.highcharts-tooltip>path:last-of-type')
                .css('fill', e.target.hoverSeries.color);
            }
          }
        },
        title: {
          text: 'Title',
          x: -20 //center
        },
        subtitle: {
          text: 'Subtitle',
          x: -20
        },
        //title: { text: null },
        xAxis: {
          categories: [
            'NOV 11',
            'DEC 11',
            'JAN 12',
            'FEB 12',
            'MAR 12',
            'APR 12',
            'MAY 12',
          ],
          gridLineColor: '#DCEBEF',
          gridLineWidth: 0.5,
          lineColor: '#ffffff',
          lineWidth: 1
            //gridLineDashStyle: 'dash'
        },
        legend: {
          enabled: false
        },
        yAxis: {
          title: {
            text: null
          },
          gridLineColor: '#DCEBEF',
          lineColor: '#ffffff',
          lineWidth: 1,
          gridLineDashStyle: 'dash'
        },
        tooltip: {
          formatter: function() {
            return this.y;
          },
          backgroundColor: 'Grey',
          borderWidth: 1,
          borderColor: '#AAA',
          style: {
            fontWeight: 'bold',
            color: 'White'
          }
        },
        plotOptions: {
          area: {
            fillOpacity: 0.08
          }
        },
        series: [{

          // Remaining series data goes here...

        }]
      });
    });
  </script>
</body>

</html>

Answer №2

To bring an element to the front, you can utilize the .toFront() function.

plotOptions: {
    area: {
        fillOpacity: 0.08,
        events: {
            mouseOver: function(e) {
                this.group.toFront();
                this.markerGroup.toFront();
            }
        }
    }
}

If you need help with the tooltip, feel free to visit this answer.

Here is an example:

$(function() {
  var marker = {
    radius: 4,
    fillColor: '#FFFFFF',
    lineWidth: 2,
    symbol: 'circle',
    lineColor: null // inherit from series
  };

  var chart = new Highcharts.Chart({
    credits: {
      enabled: false
    },
    chart: {
      renderTo: 'container',
      type: 'area',
      width: 600,
      height: 400
    },
    title: {
      text: 'Title',
      x: -20 //center
    },
    subtitle: {
      text: 'Subtitle',
      x: -20
    },
    xAxis: {
      categories: [
        'NOV 11',
        'DEC 11',
        'JAN 12',
        'FEB 12',
        'MAR 12',
        'APR 12',
        'MAY 12',
      ],
      gridLineColor: '#DCEBEF',
      gridLineWidth: 0.5,
      lineColor: '#ffffff',
      lineWidth: 1
    },
    legend: {
      enabled: false
    },
    yAxis: {
      title: {
        text: null
      },
      gridLineColor: '#DCEBEF',
      lineColor: '#ffffff',
      lineWidth: 1,
      gridLineDashStyle: 'dash'
    },
    tooltip: {
      formatter: function() {
        return this.y;
      },
      backgroundColor: 'Grey',
      borderWidth: 1,
      borderColor: '#AAA',
      style: {
        fontWeight: 'bold',
        color: 'White'
      }
    },
    plotOptions: {
      area: {
        fillOpacity: 0.08,
        events: {
          mouseOver: function(e) {
            this.group.toFront();
            this.markerGroup.toFront();
          }
        }
      }
    },
    series: [{
      name: null,
      lineWidth: 2,
      color: '#FA918C',
      marker: marker,
      data: [500, 500, 800, 1500, 1250, 800, 1150, ],
      fillColor: {
        linearGradient: [0, 0, 0, 250],
        stops: [
          [0, 'rgba(250,145,150,0.5)'],
          [1, 'rgba(255,255,255,0.5)']
        ]
      }
    }, {
      name: null,
      lineWidth: 2,
      color: '#000000',
      marker: marker,
      data: [1500, 500, 800, 1500, 1050, 1800, 150, ],
      fillColor: {
        linearGradient: [0, 0, 0, 250],
        stops: [
          [0, 'rgba(250,145,150,0.5)'],
          [1, 'rgba(255,255,255,0.5)']
        ]
      }
    }, {
      name: null,
      lineWidth: 2,
      color: '#87BCC2',
      marker: marker,
      data: [700, 950, 1100, 2000, 1650, 900, 1250, ],
      fillColor: {
        linearGradient: [0, 0, 0, 250],
        stops: [
          [0, 'rgba(135,188,194,0.5)'],
          [1, 'rgba(255,255,255,0.5)']
        ]
      }
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 600"></div>

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

Scrolling infinitely within the side menu using ion-infinite-scroll

I'm encountering an issue with using Ion-infinite-scroll within ion-side-menu, as the load more function is not being triggered. Is it permitted to utilize ion-infinite-scroll inside ion-side-menu? Although I have added the directive, the method "lo ...

javascriptangularjsionic-framework

Adding animation to a div that is being appended can be done by using JavaScript functions and

I am looking to incorporate animation into my title div. Below is the HTML code I have so far: <div class="particles" id="tittle"> <!-- Displaying title from Firestore using JavaScript --> </div> Here is the CSS cod ...

javascripthtmljquerycss

Creating a structure for data in Ruby on Rails to facilitate AJAX calls to controller actions

I am in need of a button on my website that can send data to the create action of a controller named "pagetimes". The functionality seems to be partially working, but it is not sending all the specified data. This issue may be due to my inability to struct ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Tips for converting a parent class Sprite into a subclass MySprite in Cocos2d-JS

There is a custom class called MySprite that extends Sprite and includes additional methods. var MySprite = cc.Sprite.extend({ ctor:function(){ this._super(); }, doSomethingStrange:function(){ //meow meow } } ); In the game s ...

javascriptcocos2d-js

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

javascriptcssangularjspopup

The AutoComplete component in React Material UI does not automatically assign the initialValue

I've encountered an issue with my form.js component. In this component, I have two states: update and create. Within the component, there's an AutoComplete component that works perfectly fine in the create state (data creation works as intended). ...

javascriptreactjsmaterial-ui

Having issues with django-autocomplete-light triggering JavaScript errors

My implementation of django-autocomplete-light is causing some issues with rendering autocomplete options. There is a section on the website where it functions perfectly, but in another section, it only works partially. The autocomplete options display c ...

javascriptdjangodjango-autocomplete-light

The AudioPlayer refuses to play following a track change

I am looking to implement an audio player in React Nextjs that features interactive dots, each representing an audio track. The functionality I want is such that clicking on a dot will pause the currently playing track (if any) and start playing the select ...

javascriptreactjsreact-hooksnext.jsaudio-player

Enhancing Javascript functionality with additional on.change customization opportunities

My website currently has a dynamic AJAX script that updates a table based on the selection from a dropdown menu with the ID of [id="afl_player_ID"]. However, I am looking to extend this functionality so that the same script runs when either [id="afl_playe ...

javascriptajax

Effortless login authentication using Disqus through Google or Facebook tokens

I have set up my website to allow users to authenticate through Google and Facebook using passport, which uses the OAuth 2.0 API. Additionally, I am utilizing Disqus to manage the comments system on my site. However, I am running into a problem where user ...

javascriptnode.jsfacebookoauthdisqus

Showing the value of a variable in the select dropdown field while editing using React Bootstrap

When it comes to editing, I am using input select. The ant design framework successfully displays the content of the status variable in the input field. However, in the react-bootstrap framework, I am facing issues with displaying the content of the status ...

javascriptreactjsbootstrap-4react-bootstrap

PhongMaterial designed specifically for rendering InstancedBufferGeometry

I am working on creating a scene with thousands of simple meshes, and I decided to implement InstancedBufferGeometry for better performance. Most of my code is based on the example provided here: Although instancing works well, it seems to only function p ...

javascriptthree.js

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

javascriptjqueryhtmlbootstrap-4bootstrap-tags-input

How can you retrieve an array of multiple property values from a collection of dynamic objects?

I am currently working with a dynamic JavaScript object array that has varying structures. For example: var someJsonArray = [ {point: 100, level: 3}, {point: 100, level: 3}, {point: 300, level: 6} ]; At times, it may have a different combination lik ...

javascript

Can this functionality be accomplished using only HTML and CSS, without relying on JavaScript?

Image for the Question Is it possible to create a zoom functionality using only HTML and CSS, without relying on JavaScript? I need this feature for a specific project that doesn't support JavaScript. ...

javascripthtmlcss

An Unexpected Appearance of Special Characters in a Python dictionary created from AWS and transmitted to JavaScript via a Django view

In my quest to gather information about my infrastructure, I am working on constructing a dictionary that can be converted into JSON objects. These objects will then be passed to JavaScript for display purposes. I have experimented with using both json.du ...

javascriptpythonjsondjangodictionary

Are there any libraries available that can assist with managing forms similar to how Google Contacts handles them

By default, Google Contacts has a feature where the form displays values with some of them being read only. However, when you click on a value, it converts the field into an editable form so you can easily make changes. After editing and pressing enter, th ...

javascriptruby-on-railsajax

How to retrieve headers using Express.js middleware

My middleware creates authentication API keys that are then added to the header. const loger = require("easy-loger"); require('dotenv').config(); function authMiddleware(req, res, next){ const appApiKey = process.env.API_KEY; l ...

javascriptnode.jsexpressmiddleware

Is there a way to eliminate the mongoose event listener registered onConnect in the Socket.io Leak issue?

Whenever a user connects via socket.io, the following subscribe event is triggered: socket.on('subscribe', function(room) { console.log('joining room', room.id); socket.join(room.id); socket.roomName = room.id; // ...

javascriptnode.jsmongodbsocketssocket.io

Is it appropriate to delete the comma in the Ghost Handlebars Template?

While navigating through the tags, I unexpectedly encountered a comma. This could potentially have an unwanted impact. I attempted to remove the comma, but is there a specific method to eliminate it completely? I referred to the Ghost blog Document for gui ...

javascriptnode.jshandlebars.jsghost