search

shutterstock / rickshaw

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

Legend too long, when many datasets are listed in one column #180

Closed matthiasbock closed 11 years ago

matthiasbock commented 11 years ago

I am using Rickshaw to visualize timeserieses of biological network simulations. These networks usually have many nodes/datasets, such that the legend is very long, too long.

Is there a possibility to customize the legend to have several columns ?

Screenshot

dchester commented 11 years ago

Hi,

There are a few options. One is just to try and style the existing legend contents with CSS. For example, in a webkit browser like Chrome or Safari, if you want a columns layout, you may be able to specify:

.rickshaw_legend ul {
  -webkit-column-count:3
  width: 300px;
}

Another option to consider would be too look at this example for inspiration, where the legend shows on hover and has a horizontal layout:

http://code.shutterstock.com/rickshaw/examples/hover.html

dchester commented 11 years ago

... and another option would be to set a height on the legend and set overflow: auto on the container.