-1

I'm trying to set up an interactive cascading spectrum chart, but it hasn't been such a trivial thing for me. Here's a picture of the goal I'd like to achieve:

example

It's an fft graph, I have all these points already. Do you have any tips or any examples that I could follow?

I've tried using graphics-specific libraries, but mostly they work either with points only or with surface graphics.

What I have right now is a simple hello world using Babylon JS: https://playground.babylonjs.com/#S7U8U8#1

Any help, guidance, examples will be a matter of great gratitude.

Best Regards, Matheus

Matheus
  • 11
  • 2
  • Closet thing I could find in highcharts for what you want is their 3D area chart. https://www.highcharts.com/demo/3d-area-multiple – Phaelax z Jun 10 '21 at 13:55
  • By default this wont be possible with chart.js but you can write your own custom charts, which will take some time to do. Example of custom tree map for chart.js: https://github.com/kurkle/chartjs-chart-treemap – LeeLenalee Jun 10 '21 at 14:03

1 Answers1

0

You can use column series in Highcharts with added and enabled 3d module.

    Highcharts.chart('container', {
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 20,
                beta: 30,
                depth: 400,
                ...
            }
        },
        ...
    });

Live demo: http://jsfiddle.net/BlackLabel/nxwd3m2a/

Docs: https://www.highcharts.com/docs/chart-concepts/3d-charts

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • That's an option. To use Highcharts on this approach I would like to have an option of coloring the other axis instead... So I would have a gradient on the bar according to its value. The bar should look like this: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.deviantart.com%2Fbrokenheartdesignz%2Fart%2FRed-and-purple-and-blue-gradient-387012665&psig=AOvVaw1Oyzv-ovF3q9w06GaTBH8S&ust=1623493177228000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJDR2satj_ECFQAAAAAdAAAAABAD. – Matheus Jun 11 '21 at 10:20
  • Hi @Matheus Quost, You need to only add color axis. Example: http://jsfiddle.net/BlackLabel/7q1b03rm/ – ppotaczek Jun 11 '21 at 10:41
  • Hello @ppotaczek, thanks for your comment. I see that, and it's a very good option... I'm afraid just that it's not possible to have a gradient in one bar... Do you know what I mean? It would be perfect if somehow we could set each line to a gradient like this https://aws1.discourse-cdn.com/standard17/uploads/threejs/original/3X/7/a/7a27b06f826fddbabdcb43a789d17b9f9fe998ea.png, not with just one color as in the example... I thank you because that is already working with what I want, I just would like to give it a more 'evolutive' / 'smooth effect. – Matheus Jun 11 '21 at 12:50
  • That is possible by using linear gradient color: http://jsfiddle.net/BlackLabel/o579h4L8/ but to take into account values, you will need to calculate the gradient for every point. – ppotaczek Jun 14 '21 at 09:55