Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Animated redraw / Individually colored bars #9

Open
MintyMods opened this issue Oct 19, 2019 · 2 comments
Open

Feature Request: Animated redraw / Individually colored bars #9

MintyMods opened this issue Oct 19, 2019 · 2 comments

Comments

@MintyMods
Copy link

Would it be possible to add a method that will allow the chart values to be updated and for any changes in the bar value to be shown by animating/transitioning to the new value.

I was able to get to the chart to redraw by force removal of the SVG nodes:-

  function refreshChart(values, labels) {
    if (chart !== undefined) {
      chart.data.labels = labels;
      chart.data.values = values;
      chart.svg.selectAll("*").remove();
      chart.drawChart();
    }
  }

This works but looks a little janky and has downsides such as no longer supporting tooltips, interactive highlight, etc. as the nodes are being recreated:-

roughViz

It would be awesome if there was a way to update all the options and call refresh()/redraw() and have these changes reflected without having to destroy the SVG nodes:-

chartJs

I would also like to be able to supply an array of colours for the bar charts similar to what is supported for the pie charts. Supporting only a single colour seems very limiting for such a cool chart.

Thanks

@jwilber
Copy link
Owner

jwilber commented Oct 22, 2019

Hey, thanks for this and the other issues! All are very valuable.

Yes, I agree this is a great idea. I originally stayed away from these features because I wanted the API to be as simple as possible, and e.g. the option to highlight one bar could begin a slow crawl to change that.

I do agree that the animation would look great. I'm pretty tied up this week but will look into it soon, as I think the functionality will really bring things together.

@MintyMods
Copy link
Author

Hi,

Thanks for the response. I think the animation/refresh will make it AAA+ in terms of visuals and would hopefully only add one more property to the API e.g.

export const EASING = [
	{ type: 'none', desc: 'None' },
	{ type: 'linear', desc: 'Linear' },
	{ type: 'ease', desc: 'Ease' },
	{ type: 'ease-in', desc: 'Ease In' },
	{ type: 'ease-out', desc: 'Ease Out' },
	{ type: 'ease-in-out', desc: 'Ease In Out' },
	{ type: 'cubicOut', desc: 'Cubic Out' },
];

I do feel it should support the coloured bars and the API already has this concept for the pie chart so I don't think it complicates things any.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants