jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

altering section width on selection

Hi,

I have created a stacked bar that animates when a section is selected:
https://codepen.io/jharri/pen/mzLMoe

I would also like it to appear as tho the sections either side of the one selected move away from the one selected i.e. the one selected would have a left and right margin separating it from the rest of the sections

I thought I might be able to achieve that by reducing the width of the selected section but I haven't been able to find a way so far. Do you have any suggestions on how I might achieve this effect?

thanks
Jane
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: altering section width on selection

Hi jane,
I thought I might be able to achieve that by reducing the width of the selected section but I haven't been able to find a way so far
Changing the width of the selected section is actually not a good idea, because the Highcharts SVG Element does not have such a functionality.

Another approach to this issue is to translate other points horizontally. To make it, loop through each chart series and choose only points that have the same index as the selected one. Then translate them so that left and right margins appear. Check demo I posted you below with implementation of this approach. The most important piece of code:

Code: Select all

var selectedPoint;

// Utils
function selectPoint() {
  const point = this,
    seriesIndex = point.series.index,
    chart = point.series.chart,
    slicedOffset = point.pointWidth / 4,
    translateX = point.graphic.translateX ? 0 : slicedOffset,
    translate = {
      translateX,
      translateY: 0
    },
    pointIndex = point.index,
    offset = 3;

  let barPoint,
    positive = true;

  chart.series.forEach(series => {
    barPoint = series.points[pointIndex];

    if (barPoint.series.index !== seriesIndex) {
      if (positive) {
        barPoint.graphic.animate({
          translateY: -offset
        });
      } else {
        barPoint.graphic.animate({
          translateY: offset
        });
      }
    } else {
      positive = !positive;
    }
  });

  point.graphic.animate(translate);

  if (point.dataLabel) {
    point.dataLabel.animate({
      translateX: point.dataLabel.translateX,
      translateY: point.dataLabel.translateY - translateX
    });
  }
}

function unselectPoint() {
  const point = this,
    chart = this.series.chart,
    pointIndex = point.index,
    translate = {
      translateX: 0,
      translateY: 0
    };

  let barPoint;

  chart.series.forEach(series => {
    barPoint = series.points[pointIndex];

    barPoint.graphic.animate({
      translateY: 0
    })
  });

  point.graphic.animate(translate);

  if (point.dataLabel) {
    point.dataLabel.animate({
      translateX: point.dataLabel.x,
      translateY: point.dataLabel.y
    });
  }
}

point: {
  events: {
    select() {
      const point = this;

      if (selectedPoint) {
        unselectPoint.call(point);
        setTimeout(function() {
          selectPoint.call(point);
        }, 0);
      } else {
        selectPoint.call(point);
      }

      selectedPoint = point;
    },
    unselect() {
      const point = this;

      unselectPoint.call(point);
    }
  }
}
Demo:
https://jsfiddle.net/wchmiel/9fns4o67/

Kind regards.
Wojciech Chmiel
Highcharts Developer
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: altering section width on selection

This works brilliantly, thanks so much!

Jane
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: altering section width on selection

You're welcome :wink:
Wojciech Chmiel
Highcharts Developer
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: altering section width on selection

Hi there,

After some testing I have a scenario where one of the sections is disappearing:

https://jsfiddle.net/xfaqju20/

You will see that the first section is very small (0.3) and when you click on one of the other sections on that bar, it disappears. I've tried incorporating a barPoint.graphic.toFront(); but with no effect. Is there anything else you could suggest?

Also, on a separate note, is it possible to give sections a minimum size? In this scenario the 0.3 section is very small and is very difficult to click. It has been asked by our designer whether we could force sections to have a minimum width to overcome this issue.

many thanks
Jane
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: altering section width on selection

Hi jane,
After some testing I have a scenario where one of the sections is disappearing
It is disappearing, because we translate points when a point is selected. In the example, the offset equals 3 pixels and bar width 1px. So after selecting our bar is out of the plot area.
Also, on a separate note, is it possible to give sections a minimum size?
Yes, Highcharts provide such a property called minPointLength. However, notice that it will
disturb chart scale and have an unrealistic impression of the presented data.

Demo:
https://jsfiddle.net/wchmiel/aj0tungc/

Api reference:
https://api.highcharts.com/highcharts/p ... ointLength

Kind regards.
Wojciech Chmiel
Highcharts Developer
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: altering section width on selection

Hi,
It is disappearing, because we translate points when a point is selected. In the example, the offset equals 3 pixels and bar width 1px. So after selecting our bar is out of the plot area.
Is there any way I could force it to go outside of the plot area? I tried including a spacingLeft without any joy but is there any way of introducing an overflow somehow?
However, notice that it will
disturb chart scale and have an unrealistic impression of the presented data.
Yes, it's a concern I have raised with the design team but thought I'd ask just in case they decide to go down that path anyway. :)

thank you for your response.
Jane
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: altering section width on selection

jane,
Is there any way I could force it to go outside of the plot area? I tried including a spacingLeft without any joy but is there any way of introducing an overflow somehow?
Unfortunately, there is no such a possibility. However, you can set yAxis min so that bars will have a little offset from plot area edge. Check the demo: https://jsfiddle.net/wchmiel/m9kz4ufc/2/.

Kind regards.
Wojciech Chmiel
Highcharts Developer
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: altering section width on selection

ah! lovely idea, thank you

Return to “Highcharts Usage”