shutterstock / rickshaw

JavaScript toolkit for creating interactive real-time graphs
https://shutterstock.github.io/rickshaw
MIT License
6.53k stars 941 forks source link

Rickshaw colors "outside the lines" #564

Open mustmodify opened 7 years ago

mustmodify commented 7 years ago

First, thanks for developing this tool. After examining close to 20 js charting frameworks, this one was the best match for us. I'll be contributing at least one new renderer soon.

Second, I'm having an issue. I know I could solve this with max and min values, but I'd rather it just be correct.

Here are two charts where Rickshaw (a) makes an odd decision about how to render (why start most of the way up and then keep going up?) and second, draws things outside the image.

https://jsfiddle.net/u6ffh0xm/2/

I'd appreciate any feedback on how to get everything within the image.

Am I missing a stylesheet? Seems like I've copied everything from your examples, but you never know.

Thanks for any advice, direction or fixes.

ceremcem commented 7 years ago

A few mistakes here.

First, you should use another variable name for second graph. Also, you should pass another array (data) to another graph.

Here is the working version: https://jsfiddle.net/ceremcem/u6ffh0xm/4/

mustmodify commented 7 years ago

@ceremcem can you send a screenshot of what you see to me? This is what I see for your fiddle:

I'm on Chrome (latest?) on Windows 10.

image

ceremcem commented 7 years ago

That's correct? Isn't it?

ceremcem commented 7 years ago

A-ha! wait a little bit.

ceremcem commented 7 years ago

the_data2 was a little bit misleading. Here is a slightly different the_data2 https://jsfiddle.net/ceremcem/u6ffh0xm/5/ and here is its screenshot:

image

mustmodify commented 7 years ago

Great, perfect example. So my complaints in this ticket are:

  1. makes an odd decision about how to render (why start most of the way up and then keep going up?)
  2. draws things outside the image. (note that the circles are cut off ... top of first image and left-and-top of second image.)
ceremcem commented 7 years ago
  1. I didn't understand what you mean here.
  2. I didn't touch that part on purpose. Here is a better looking version: https://jsfiddle.net/ceremcem/u6ffh0xm/6/ It's all about the CSS.

image