FlexChart Line symbol hover highlight

FlexChart Line symbol hover highlight

Posted by: lk_richard on 11 February 2020, 11:17 pm EST

• 

  lk_richard

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 February 2020, 11:17 pm EST

  Hi guys,

  For ChartType.Line, how can I make the data points highlighted automatically when hover on it? And same effects also for the stacked bar charts? like when your mouse hovering on the data chunk, it is automatically highlighted?

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2020, 2:54 am EST

  Hi Richard,

  We can easily add this feature with a bar chart. Just add a CSS rule on the rect element of the series with the hover pseudo-selector:

  .wj-series-group rect:hover {
    stroke-width: 4px;
    stroke: aqua;
  }
  

  But, this is not possible in the Line chart because the whole Line is created using a single polyline element so we cannot add a hover effect for a single data. But, you can use the LineSymbol chart and add the effect on the symbols the same way as the bar chart:

  .wj-series-group ellipse:hover {
    stroke-width: 4px;
    stroke: aqua
  }
  

  You may refer to the following sample:

  https://stackblitz.com/edit/js-bj2pnq

  Regards,
  
  Ashwin

• 

  lk_richard

  • Post Options:
  • Link
    Copy

  Posted 12 February 2020, 11:20 pm EST

  Hi Ashwin,

  Thanks so much for replying.
  
  Can I follow with another question that how can we change the size of the eclipse?
  
  I can see it is by default all 10*10. Can I change it to 1 or a small size to simulate as line with only change when hovering.

  Cheers,

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2020, 11:33 pm EST

  Hi Richard,

  Just change the symbolSize property of the line chart series to 1:

  series: [
  	{ binding: 'downloads', name: 'Downloads', chartType: 'LineSymbols', symbolSize: 1 },
  ],
  

  This will make the size of the ellipses to 1px.

  ~regards

• 

  lk_richard

  • Post Options:
  • Link
    Copy

  Posted 13 February 2020, 1:53 am EST

  Thanks, Ashwin.

  One more question. For the stack bar chart, how to set the space between bars to 0.
  
  Which means no matter how the rangeselector moves, the bar columns are always next to each other with no padding between them?

  Cheers

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 February 2020, 1:31 am EST

  Hi Richard,

  You can set the groupWidth of the FlexChart to 100%. This will remove all the padding from between each of the series groups:

  var chart = new wjcChart.FlexChart("#chart", {
  	...
  	options: {
  		groupWidth: "100%"
  	}
  });
  

  ~regards

• 

  lk_richard

  • Post Options:
  • Link
    Copy

  Posted 14 February 2020, 5:00 am EST

  Thanks so much, ashwin. That works well.

• 

  dev

  • Post Options:
  • Link
    Copy

  Posted 12 May 2021, 12:29 pm EST

  Hi there

  I have a follow up to this… Regarding the line chart.

  The tooltip pops up when you get close to the point (but not exactly on it) but the example given only highlights the point when exactly hovering over the data point. Is there a way to highlight the point in the same way as the tooltip (some kind of radius from the point)?

  Thanks!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 May 2021, 8:25 am EST

  Hi Brian,

  You can achieve this functionality by adding a custom hover class on the elements instead of using the :hover selector. For this, handle the mousemove event and get the closest element to the mouse and this css class to it. You may refer to the sample link below for reference:

  https://stackblitz.com/edit/js-d5lltg

  ~regards

• 

  dev

  • Post Options:
  • Link
    Copy

  Posted 13 May 2021, 10:13 am EST

  Hi Ashwin

  Thanks so much for your super speedy reply. Looks good apart from the tooltip now not appearing. Would I need to manually create a tooltip in the addHoverFunctionality method?

  Thanks
  
  Brian

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 May 2021, 11:51 pm EST

  Hi Brian,

  Sorry for the inconvenience. I actually removed the tooltip myself so that I can see the hovering result better. I have updated the sample to use tooltip again:

  https://stackblitz.com/edit/js-d5lltg?file=style.css

  ~regards

• 

  dev

  • Post Options:
  • Link
    Copy

  Posted 19 May 2021, 7:30 am EST

  Hi Ashwin

  This works a treat. Thankyou!

  Kind regards
  
  Brian