Is there a function to highlight another stat/point/column while hovering element on Highcharts?

Multi tool use
Multi tool use












0















I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.



JS Fiddle: http://jsfiddle.net/dybtupjc/6/



Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)



Tried this, but didn't work..



 this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
//events of highcharts
events: {
// on mouse over
mouseOver: function () {
var number;
// loop through all the values that the chart has
for(var i = 0; dataPoll.length > i; i++){
// this.y is the value formatted on the charted and provide in the mouseOver function
if(dataPoll[i] == this.y) {
console.log("Match", dataPoll[i])
console.log("Number", i)
// And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
var number = i + 6;
console.log("Sum", number)

$scope.setColorSeries(number);
}
}
// This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
this.update({
color: '#000',
colorThis: this.color,
numberExtrem: number + 6
});

},
mouseOut: function () {
console.log("out mouse!", this)
this.update({
color: this.colorThis
});
}
}
}}];


Now, what I want is this:





It should work like this:




But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)



This is the fiddle I uploaded.
The column under the arrow needs to be black as well.





And I have a question, how could as well add and arrow between both two columns?



Thanks in advance.










share|improve this question





























    0















    I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.



    JS Fiddle: http://jsfiddle.net/dybtupjc/6/



    Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)



    Tried this, but didn't work..



     this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
    //events of highcharts
    events: {
    // on mouse over
    mouseOver: function () {
    var number;
    // loop through all the values that the chart has
    for(var i = 0; dataPoll.length > i; i++){
    // this.y is the value formatted on the charted and provide in the mouseOver function
    if(dataPoll[i] == this.y) {
    console.log("Match", dataPoll[i])
    console.log("Number", i)
    // And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
    var number = i + 6;
    console.log("Sum", number)

    $scope.setColorSeries(number);
    }
    }
    // This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
    this.update({
    color: '#000',
    colorThis: this.color,
    numberExtrem: number + 6
    });

    },
    mouseOut: function () {
    console.log("out mouse!", this)
    this.update({
    color: this.colorThis
    });
    }
    }
    }}];


    Now, what I want is this:





    It should work like this:




    But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)



    This is the fiddle I uploaded.
    The column under the arrow needs to be black as well.





    And I have a question, how could as well add and arrow between both two columns?



    Thanks in advance.










    share|improve this question



























      0












      0








      0








      I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.



      JS Fiddle: http://jsfiddle.net/dybtupjc/6/



      Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)



      Tried this, but didn't work..



       this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
      //events of highcharts
      events: {
      // on mouse over
      mouseOver: function () {
      var number;
      // loop through all the values that the chart has
      for(var i = 0; dataPoll.length > i; i++){
      // this.y is the value formatted on the charted and provide in the mouseOver function
      if(dataPoll[i] == this.y) {
      console.log("Match", dataPoll[i])
      console.log("Number", i)
      // And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
      var number = i + 6;
      console.log("Sum", number)

      $scope.setColorSeries(number);
      }
      }
      // This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
      this.update({
      color: '#000',
      colorThis: this.color,
      numberExtrem: number + 6
      });

      },
      mouseOut: function () {
      console.log("out mouse!", this)
      this.update({
      color: this.colorThis
      });
      }
      }
      }}];


      Now, what I want is this:





      It should work like this:




      But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)



      This is the fiddle I uploaded.
      The column under the arrow needs to be black as well.





      And I have a question, how could as well add and arrow between both two columns?



      Thanks in advance.










      share|improve this question
















      I'm setting up highcharts and want to highlight both two columns/serie/point when I'm hovering in one.



      JS Fiddle: http://jsfiddle.net/dybtupjc/6/



      Researched the web and found that I can use mouseOver & out to handle the element, but I can only handle one, not all of the stats of the series (which is what I need: hover one, and also the other on the other corner)



      Tried this, but didn't work..



       this.chartConfig.series = [{type: 'column',name: 'Dh',data: dataPoll,point: {
      //events of highcharts
      events: {
      // on mouse over
      mouseOver: function () {
      var number;
      // loop through all the values that the chart has
      for(var i = 0; dataPoll.length > i; i++){
      // this.y is the value formatted on the charted and provide in the mouseOver function
      if(dataPoll[i] == this.y) {
      console.log("Match", dataPoll[i])
      console.log("Number", i)
      // And since there are 12 categories (columns), I add 6 to the hover (which is for testing the first numbers, higher numbers will definitely not work), so it can highlight the upper column
      var number = i + 6;
      console.log("Sum", number)

      $scope.setColorSeries(number);
      }
      }
      // This is actual valid code, it updates the color of the column under the cursor. Maybe there is a function to call like: this.data[6].update(....)
      this.update({
      color: '#000',
      colorThis: this.color,
      numberExtrem: number + 6
      });

      },
      mouseOut: function () {
      console.log("out mouse!", this)
      this.update({
      color: this.colorThis
      });
      }
      }
      }}];


      Now, what I want is this:





      It should work like this:




      But the actual output is that I'm hovering the column under the cursor, and I need to highlight both cursor and other column (which it will be its counterpart)



      This is the fiddle I uploaded.
      The column under the arrow needs to be black as well.





      And I have a question, how could as well add and arrow between both two columns?



      Thanks in advance.







      javascript web charts highcharts hover






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 29 '18 at 8:14









      Vickey

      56111




      56111










      asked Dec 28 '18 at 21:30









      Matías ForkMatías Fork

      52




      52
























          1 Answer
          1






          active

          oldest

          votes


















          0














          You can use point events like mouseOver and mouseOut to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut events occur set normal (empty string) state again using the same approach:



          JS:



          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          }
          }
          }

          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }


          API reference:
          https://api.highcharts.com/class-reference/Highcharts.Point#setState



          Demo:
          https://jsfiddle.net/BlackLabel/bn5wc80p/






          And I have a question, how could as well add an arrow between both
          two columns?




          You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.



          CSS:



          .highcharts-vector-series {
          pointer-events: none;
          }


          JS:



            series: [{
          type: 'column',
          name: 'Column',
          data: [8, 7, 3, 4, 9, 4, 7, 3],
          pointPlacement: 'between',
          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          setArrowsState(this, 'green');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
          }
          }
          }
          }, {
          type: 'vector',
          color: 'rgba(255, 255, 255, 0.3)',
          rotationOrigin: 'start',
          vectorLength: 50,
          lineWidth: 4,
          data: [
          [0, 0, 10, 205],
          [0, 0, 10, 250],
          [0, 0, 10, 295],
          [0, 0, 10, 340],
          [0, 0, 10, 25],
          [0, 0, 10, 70],
          [0, 0, 10, 115],
          [0, 0, 10, 160]
          ]
          }]


          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }

          function setArrowsState(point, color) {
          var series = point.series,
          arrowSeries = series.chart.series[1],
          category = point.category,
          arrowDir = category + 180 + 25,
          nextArrowDir = arrowDir + 180,
          index,
          nextIndex,
          arrow,
          nextArrow;

          arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
          nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;

          index = arrowSeries.directionData.indexOf(arrowDir);
          nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);

          if (index !== -1 && nextIndex !== -1) {
          arrow = arrowSeries.data[index];
          nextArrow = arrowSeries.data[nextIndex];

          arrow.update({
          color: color
          });

          nextArrow.update({
          color: color
          });
          }
          }


          API reference:
          https://api.highcharts.com/highcharts/series.vector
          https://api.highcharts.com/class-reference/Highcharts.Point#update



          Demo:
          https://jsfiddle.net/BlackLabel/Lgkd01q8/






          share|improve this answer
























          • Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.

            – Matías Fork
            Dec 29 '18 at 19:56













          • How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5

            – Matías Fork
            Dec 29 '18 at 20:38











          • i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..

            – Matías Fork
            Dec 29 '18 at 20:46













          • To make it works with 12 arrows you have to change degrees of each vector and modify the setArrowsState function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.

            – Wojciech Chmiel
            Jan 3 at 7:18













          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964478%2fis-there-a-function-to-highlight-another-stat-point-column-while-hovering-elemen%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          You can use point events like mouseOver and mouseOut to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut events occur set normal (empty string) state again using the same approach:



          JS:



          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          }
          }
          }

          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }


          API reference:
          https://api.highcharts.com/class-reference/Highcharts.Point#setState



          Demo:
          https://jsfiddle.net/BlackLabel/bn5wc80p/






          And I have a question, how could as well add an arrow between both
          two columns?




          You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.



          CSS:



          .highcharts-vector-series {
          pointer-events: none;
          }


          JS:



            series: [{
          type: 'column',
          name: 'Column',
          data: [8, 7, 3, 4, 9, 4, 7, 3],
          pointPlacement: 'between',
          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          setArrowsState(this, 'green');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
          }
          }
          }
          }, {
          type: 'vector',
          color: 'rgba(255, 255, 255, 0.3)',
          rotationOrigin: 'start',
          vectorLength: 50,
          lineWidth: 4,
          data: [
          [0, 0, 10, 205],
          [0, 0, 10, 250],
          [0, 0, 10, 295],
          [0, 0, 10, 340],
          [0, 0, 10, 25],
          [0, 0, 10, 70],
          [0, 0, 10, 115],
          [0, 0, 10, 160]
          ]
          }]


          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }

          function setArrowsState(point, color) {
          var series = point.series,
          arrowSeries = series.chart.series[1],
          category = point.category,
          arrowDir = category + 180 + 25,
          nextArrowDir = arrowDir + 180,
          index,
          nextIndex,
          arrow,
          nextArrow;

          arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
          nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;

          index = arrowSeries.directionData.indexOf(arrowDir);
          nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);

          if (index !== -1 && nextIndex !== -1) {
          arrow = arrowSeries.data[index];
          nextArrow = arrowSeries.data[nextIndex];

          arrow.update({
          color: color
          });

          nextArrow.update({
          color: color
          });
          }
          }


          API reference:
          https://api.highcharts.com/highcharts/series.vector
          https://api.highcharts.com/class-reference/Highcharts.Point#update



          Demo:
          https://jsfiddle.net/BlackLabel/Lgkd01q8/






          share|improve this answer
























          • Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.

            – Matías Fork
            Dec 29 '18 at 19:56













          • How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5

            – Matías Fork
            Dec 29 '18 at 20:38











          • i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..

            – Matías Fork
            Dec 29 '18 at 20:46













          • To make it works with 12 arrows you have to change degrees of each vector and modify the setArrowsState function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.

            – Wojciech Chmiel
            Jan 3 at 7:18


















          0














          You can use point events like mouseOver and mouseOut to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut events occur set normal (empty string) state again using the same approach:



          JS:



          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          }
          }
          }

          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }


          API reference:
          https://api.highcharts.com/class-reference/Highcharts.Point#setState



          Demo:
          https://jsfiddle.net/BlackLabel/bn5wc80p/






          And I have a question, how could as well add an arrow between both
          two columns?




          You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.



          CSS:



          .highcharts-vector-series {
          pointer-events: none;
          }


          JS:



            series: [{
          type: 'column',
          name: 'Column',
          data: [8, 7, 3, 4, 9, 4, 7, 3],
          pointPlacement: 'between',
          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          setArrowsState(this, 'green');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
          }
          }
          }
          }, {
          type: 'vector',
          color: 'rgba(255, 255, 255, 0.3)',
          rotationOrigin: 'start',
          vectorLength: 50,
          lineWidth: 4,
          data: [
          [0, 0, 10, 205],
          [0, 0, 10, 250],
          [0, 0, 10, 295],
          [0, 0, 10, 340],
          [0, 0, 10, 25],
          [0, 0, 10, 70],
          [0, 0, 10, 115],
          [0, 0, 10, 160]
          ]
          }]


          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }

          function setArrowsState(point, color) {
          var series = point.series,
          arrowSeries = series.chart.series[1],
          category = point.category,
          arrowDir = category + 180 + 25,
          nextArrowDir = arrowDir + 180,
          index,
          nextIndex,
          arrow,
          nextArrow;

          arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
          nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;

          index = arrowSeries.directionData.indexOf(arrowDir);
          nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);

          if (index !== -1 && nextIndex !== -1) {
          arrow = arrowSeries.data[index];
          nextArrow = arrowSeries.data[nextIndex];

          arrow.update({
          color: color
          });

          nextArrow.update({
          color: color
          });
          }
          }


          API reference:
          https://api.highcharts.com/highcharts/series.vector
          https://api.highcharts.com/class-reference/Highcharts.Point#update



          Demo:
          https://jsfiddle.net/BlackLabel/Lgkd01q8/






          share|improve this answer
























          • Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.

            – Matías Fork
            Dec 29 '18 at 19:56













          • How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5

            – Matías Fork
            Dec 29 '18 at 20:38











          • i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..

            – Matías Fork
            Dec 29 '18 at 20:46













          • To make it works with 12 arrows you have to change degrees of each vector and modify the setArrowsState function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.

            – Wojciech Chmiel
            Jan 3 at 7:18
















          0












          0








          0







          You can use point events like mouseOver and mouseOut to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut events occur set normal (empty string) state again using the same approach:



          JS:



          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          }
          }
          }

          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }


          API reference:
          https://api.highcharts.com/class-reference/Highcharts.Point#setState



          Demo:
          https://jsfiddle.net/BlackLabel/bn5wc80p/






          And I have a question, how could as well add an arrow between both
          two columns?




          You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.



          CSS:



          .highcharts-vector-series {
          pointer-events: none;
          }


          JS:



            series: [{
          type: 'column',
          name: 'Column',
          data: [8, 7, 3, 4, 9, 4, 7, 3],
          pointPlacement: 'between',
          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          setArrowsState(this, 'green');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
          }
          }
          }
          }, {
          type: 'vector',
          color: 'rgba(255, 255, 255, 0.3)',
          rotationOrigin: 'start',
          vectorLength: 50,
          lineWidth: 4,
          data: [
          [0, 0, 10, 205],
          [0, 0, 10, 250],
          [0, 0, 10, 295],
          [0, 0, 10, 340],
          [0, 0, 10, 25],
          [0, 0, 10, 70],
          [0, 0, 10, 115],
          [0, 0, 10, 160]
          ]
          }]


          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }

          function setArrowsState(point, color) {
          var series = point.series,
          arrowSeries = series.chart.series[1],
          category = point.category,
          arrowDir = category + 180 + 25,
          nextArrowDir = arrowDir + 180,
          index,
          nextIndex,
          arrow,
          nextArrow;

          arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
          nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;

          index = arrowSeries.directionData.indexOf(arrowDir);
          nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);

          if (index !== -1 && nextIndex !== -1) {
          arrow = arrowSeries.data[index];
          nextArrow = arrowSeries.data[nextIndex];

          arrow.update({
          color: color
          });

          nextArrow.update({
          color: color
          });
          }
          }


          API reference:
          https://api.highcharts.com/highcharts/series.vector
          https://api.highcharts.com/class-reference/Highcharts.Point#update



          Demo:
          https://jsfiddle.net/BlackLabel/Lgkd01q8/






          share|improve this answer













          You can use point events like mouseOver and mouseOut to get the actual hovering point and based on its category (in a polar chart it is column angle) calculate an opposite point category which allows you to get this point object and set hover state on it. When mouseOut events occur set normal (empty string) state again using the same approach:



          JS:



          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          }
          }
          }

          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }


          API reference:
          https://api.highcharts.com/class-reference/Highcharts.Point#setState



          Demo:
          https://jsfiddle.net/BlackLabel/bn5wc80p/






          And I have a question, how could as well add an arrow between both
          two columns?




          You can use vector series type. If you want to highlight arrows as well use the same approach as with columns. Check the demo and code posted below.



          CSS:



          .highcharts-vector-series {
          pointer-events: none;
          }


          JS:



            series: [{
          type: 'column',
          name: 'Column',
          data: [8, 7, 3, 4, 9, 4, 7, 3],
          pointPlacement: 'between',
          point: {
          events: {
          mouseOver: function() {
          setNextPointState(this, 'hover');
          setArrowsState(this, 'green');
          },
          mouseOut: function() {
          setNextPointState(this, '');
          setArrowsState(this, 'rgba(255, 255, 255, 0.3)');
          }
          }
          }
          }, {
          type: 'vector',
          color: 'rgba(255, 255, 255, 0.3)',
          rotationOrigin: 'start',
          vectorLength: 50,
          lineWidth: 4,
          data: [
          [0, 0, 10, 205],
          [0, 0, 10, 250],
          [0, 0, 10, 295],
          [0, 0, 10, 340],
          [0, 0, 10, 25],
          [0, 0, 10, 70],
          [0, 0, 10, 115],
          [0, 0, 10, 160]
          ]
          }]


          function setNextPointState(point, state) {
          var series = point.series,
          category = point.category,
          nextPointCategory = category - 180,
          index,
          nextPoint;

          nextPointCategory = (nextPointCategory < 0) ? 360 + nextPointCategory : nextPointCategory;
          nextPointCategory = (nextPointCategory > 360) ? nextPointCategory - 360 : nextPointCategory;

          index = series.xData.indexOf(nextPointCategory);

          if (index !== -1) {
          nextPoint = series.data[index];
          nextPoint.setState(state);
          }
          }

          function setArrowsState(point, color) {
          var series = point.series,
          arrowSeries = series.chart.series[1],
          category = point.category,
          arrowDir = category + 180 + 25,
          nextArrowDir = arrowDir + 180,
          index,
          nextIndex,
          arrow,
          nextArrow;

          arrowDir = (arrowDir > 360) ? arrowDir - 360 : arrowDir;
          nextArrowDir = (nextArrowDir > 360) ? nextArrowDir - 360 : nextArrowDir;

          index = arrowSeries.directionData.indexOf(arrowDir);
          nextIndex = arrowSeries.directionData.indexOf(nextArrowDir);

          if (index !== -1 && nextIndex !== -1) {
          arrow = arrowSeries.data[index];
          nextArrow = arrowSeries.data[nextIndex];

          arrow.update({
          color: color
          });

          nextArrow.update({
          color: color
          });
          }
          }


          API reference:
          https://api.highcharts.com/highcharts/series.vector
          https://api.highcharts.com/class-reference/Highcharts.Point#update



          Demo:
          https://jsfiddle.net/BlackLabel/Lgkd01q8/







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 29 '18 at 9:12









          Wojciech ChmielWojciech Chmiel

          1,285129




          1,285129













          • Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.

            – Matías Fork
            Dec 29 '18 at 19:56













          • How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5

            – Matías Fork
            Dec 29 '18 at 20:38











          • i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..

            – Matías Fork
            Dec 29 '18 at 20:46













          • To make it works with 12 arrows you have to change degrees of each vector and modify the setArrowsState function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.

            – Wojciech Chmiel
            Jan 3 at 7:18





















          • Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.

            – Matías Fork
            Dec 29 '18 at 19:56













          • How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5

            – Matías Fork
            Dec 29 '18 at 20:38











          • i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..

            – Matías Fork
            Dec 29 '18 at 20:46













          • To make it works with 12 arrows you have to change degrees of each vector and modify the setArrowsState function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.

            – Wojciech Chmiel
            Jan 3 at 7:18



















          Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.

          – Matías Fork
          Dec 29 '18 at 19:56







          Really impressive answer., Wojciech. Many thanks for your time; the answer solves the problem.

          – Matías Fork
          Dec 29 '18 at 19:56















          How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5

          – Matías Fork
          Dec 29 '18 at 20:38





          How do you make the arrows work so neat with no 8, but 12 columns? I'm trying and it gets messy in the hover. Tried to set the degrees but no luck, jsfiddle.net/c28yhLd5

          – Matías Fork
          Dec 29 '18 at 20:38













          i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..

          – Matías Fork
          Dec 29 '18 at 20:46







          i.imgur.com/AhlwUJU.png see the arrows? the hover also doesn't work. except one. strange..

          – Matías Fork
          Dec 29 '18 at 20:46















          To make it works with 12 arrows you have to change degrees of each vector and modify the setArrowsState function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.

          – Wojciech Chmiel
          Jan 3 at 7:18







          To make it works with 12 arrows you have to change degrees of each vector and modify the setArrowsState function to calculate arrows direction properly. I modified the function and now you can pass an arrow deviation as the third parameter (deviation is equal to 15 degrees for 12 columns). Demo: jsfiddle.net/fse3k84n.

          – Wojciech Chmiel
          Jan 3 at 7:18




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964478%2fis-there-a-function-to-highlight-another-stat-point-column-while-hovering-elemen%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          MLRwuoqf6DT1eLpdoPJooFAvSl
          fl,USG,OysluMp,k,ub07eeDGOnFvpAl7 fGdnwN0

          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas