jwilber / roughViz

Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.
https://www.jwilber.me/roughviz/
MIT License
6.73k stars 227 forks source link

Feature Request: Animated redraw / Individually colored bars #9

Open MintyMods opened 5 years ago

MintyMods commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.