0

I need a javascript charting library that will fit my needs as I will elaborate. I need to be able to create multi series candlestick charts stacked ontop of volume bars, and I also need to be draw pictures on top of the data points. And I need to be able to have a range slider at the bottom to look at old datapoints.

I was using google.visualization, but as soon as I put a range filter on it, it broke my needs, as trying to get the positions on the chart converted into coordinates, so that I could draw images on top of the candles on a canvas I positioned ontop of it, got broken (seems I have to stretch them out from the middle). But I was just annoyed and I started looking at canvasJS, because they use a canvas, so I didn't have to create my own canvas on top and I read that drawing on a canvas is better on memory because it's not creating new dom elements everytime there is data added to it, and this is dynamic data. Plus the range filter available in google visulization sucks because it doesn't really look good when you have multi series, as it looks ugly and I originally just wanted a slider that I could slide back and forth to look at older data as it is a live chart connected to a websocket I am making. And I can't do that in google.visulizations.

So I started trying to use canvasJS, but I couldn't find a way to have both a multi series candlestick data and volume bars underneath complete with there own separate y axis labels. So I created two charts and put them underneath each other. But then I had to line up the y axis, and I figured out how to do that, but the problem is they force you to render it before doing the calculations you need to do to line it up, so I had to render it, adjust the axis, and re-render it, over and over again as this is dynamic data. I tried getting around this by rendering first to an invisible div then copying to a visible canvas, but the y axis was no longer visible for some reason. I tried resetting the size of the visible canvas based on the bounds of the invisible chart, but still there was no y axis for some reason. Maybe I could figure it out, but the fact that I have to do hackish things to make the library fit my needs just because they don't have the exact features I need is not ideal, and I could waste a lot of time trying to get it to work, as I already have.

I could keep looking at more libraries, but what if I discover more ways they don't fit my needs. But maybe there are some suggestions that could be given. I am getting to the point where I am thinking about creating my own chart from scratch in HTML5 canvas without a library.

4
  • @Syed There is a free trial for FusionCharts however the basic plan is at 499$/year.
    – Gounou
    Sep 8, 2021 at 12:53
  • Actually, I just ended up drawing my own chart from scratch in javascript. I haven't seen anything in any charting library that things exactly the way I wanted to do them, including in ECharts. That slider design is not at all the way I wanted to design things, I just wanted left and right triangle shape buttons for sliding left and right and I ended up putting up and down triangle shape buttons for zooming in and out. The only thing I could do was draw my charts from scratch to get my custom solution. It wasn't that hard to do from scratch either. I don't know why people have told me before,
    – user904542
    Nov 18, 2021 at 19:20
  • @user904542: I encourage you to post your code on GitHub, so that others can reuse it. If you do, please feel free to post an answer about it below :-) Thanks!
    – Nicolas Raoul
    Nov 24, 2021 at 2:52

1 Answer 1

0

ECharts

Apache ECharts is an Open Source JavaScript Visualization Library. You can try it online. Just click on an example and modify the source code.

Examples for candlestick charts

Example with a slider and volume bar

  • For the slider there are arrows (left and right) to select a duration (range). And on mouse over there are plus signs at left and right to change period (date).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.