CODEWITHSUNDEEP
javascriptdygraphs
Brady Moritz
Brady Moritz

Reputation: 8903

Vertical graphing in Dygraph?

I'd like to use Dygraphs for a web project, but I need to graph my lines in a "vertical" fashion- meaning- what is normally the X axis (horizontally, along the bottom), I need to be graphed from top to bottom (with the x axis along the left edge).

I've looked at several graphing libraries for this and none seem to support it. I recently discovered Dygraphs so I'm hoping it might have this feature.

Upvotes: 2

Views: 677

Answers (2)

Geronimo
Geronimo

Reputation: 238

The css to rotate the graph:

.graphStyle {
  transform: rotate(90deg) translate(280px,240px);
}
.dygraph-axis-label.dygraph-axis-label-x {
  transform: rotate(-90deg) translate(-20px, 0);
}
.dygraph-axis-label.dygraph-axis-label-y {
  transform: rotate(-90deg) translate(-10px,10px);
}

.dygraph-legend {
  transform: translate(-320px,-300px) rotate(-90deg);}

The translations were to place the graph where I wanted, you will have to change them.

Upvotes: 0

danvk
danvk

Reputation: 16903

While vertical charts are not supported out of the box, it is possible to achieve this effect using CSS transformations. Basically, you rotate the <div> that contains the chart by 90 degrees and undo that transformation for the labels.

One dygraphs user was able to get this work. See this demo.

Upvotes: 2

Related Questions