shutterstock / rickshaw

JavaScript toolkit for creating interactive real-time graphs

Home Page:https://shutterstock.github.io/rickshaw

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rickshaw colors "outside the lines"

mustmodify opened this issue · comments

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.

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/

@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

That's correct? Isn't it?

A-ha! wait a little bit.

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

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.)
  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