Video tutorial

Layer data

View example tree and data

• Example data

One column of numerical data is needed. If you leave a cell blank, the bar of corresponding node will not be drawn.

• TSV format

Node IDs    Bar value
EF151805    2
AY699794    3
AJ608641    4
JF937440    5
AJ744861    6
AJ564643    7
FN393747    8
AJ717393    -9
MK238778    10
AJ575266    11
MT758060    12
MT760162    13
NR_025743    14
FM883672    2
HE985070    3
FR687202    4
KT253329    5
HQ326178    6
MT759893    
KF309029    8
FM991866    9
MH197303    10
FR681897    13
MW309385    12
DQ112660    13
AJ575263    14
MK096443    2

Layer controlling attributes

canvas

• Canvas scale

1 width: The width of canvas to draw bar plot.

2 x: By default, the canvas starts at the end of branch whose length is longest. This value is the offset from that position.

xAxis

• Text style
  

1 rotate: Change the text rotation of ticks value.

2 font-size: Svg text attribute.

3 fill: Svg text attribute.

4 font-weight: Svg text attribute.

5 text-anchor: Svg text attribute.

6 font-style: Svg text attribute.

7 x: Svg text attribute.

8 y: Svg text attribute.

• Tick
  

1 stroke: Svg line attribute.

2 stroke-width: Svg line attribute.

3 stroke-opacity: Svg line attribute.

4 tickValues: Specify which tick values to retain. The general format is tick values separated by comma.

5 tickFormat: Click this link for more details

6 removePath: Remove the axis line.

7 removeTick: Remove tick lines.

• Grid
  

1 switch: Whether to draw tick grid.

2 stroke: Svg line attribute.

3 stroke-width: Svg line attribute.

4 stroke-dasharray: Svg line attribute.

5 stroke-opacity: Svg line attribute.

• Label
  

1 text: Label text.

2 y: Svg text attribute.

3 font-size: Svg text attribute.

4 fill: Svg text attribute.

5 font-weight: Svg text attribute.

6 font-style: Svg text attribute.

background

• Background

1 switch: Whether to draw background.

2 fill: Svg rect attribute.

3 fill-opacity: Svg rect attribute.

bar

• Bar style
  

1 padding: Adjust the spacing between two bars.

2 fill: Svg rect attribute.

3 fill-opacity: Svg rect attribute.

4 stroke: Svg rect attribute.

5 stroke-width: Svg rect attribute.

6 stroke-opacity: Svg rect attribute.

• Bar text
  

1 switch: Whether to draw value texts.

2 align: Align value texts.

3 font-size: Svg text attribute.

4 fill: Svg text attribute.

5 font-weight: Svg text attribute.

6 font-style: Svg text attribute.

7 x: Svg text attribute.

8 value-format: This attribute is the same as tick format. Click this link for more details