FlexChart Line symbol hover highlight

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

  • Posted 11 February 2020, 2: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
  • Marked as Answer

    Replied 11 February 2020, 5:54 pm 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
  • Replied 12 February 2020, 2: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,
  • Replied 12 February 2020, 2: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
  • Replied 12 February 2020, 4:53 pm 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
  • Replied 13 February 2020, 4:31 pm 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
  • Replied 13 February 2020, 8:00 pm EST

    Thanks so much, ashwin. That works well.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels