Org Chart

Hierarchical org chart / tree visualization.

python 6 params

ReferenceGuide

Preview

  • AL
    Ada LovelaceCEO
    • GH
      Grace HopperCTO
      • AT
        Alan TuringEngineer
Arguments
org_chart(nodes=[{'id': 'ceo', 'name': 'Ada Lovelace', 'title': 'CEO'}, {'id': 'cto', 'name': 'Grace Hopper', 'title': 'CTO', 'parent': 'ceo'}, {'id': 'eng', 'name': 'Alan Turing', 'title': 'Engineer', 'parent': 'cto'}])

Usage

views.py
python
from djust import LiveView
from djust.components import OrgChart


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.component = OrgChart(nodes=[{'id': 'ceo', 'name': 'Ada Lovelace', 'title': 'CEO'}, {'id': 'cto', 'name': 'Grace Hopper', 'title': 'CTO', 'parent': 'ceo'}, {'id': 'eng', 'name': 'Alan Turing', 'title': 'Engineer', 'parent': 'cto'}])
my_template.html
django
{{ component }}

Parameters

NameTypeDefault
nodeslist | NoneNone
rootstr | NoneNone
eventstr — renames the event; identity is `name`''
directionstr'vertical'
custom_classstr''
**kwargs— passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state—
Source & styles
FilePathNotes
moduledjust.components.components.org_chartSubclass it, or pass custom_class, to change how it renders.
cssdjust_components/components.cssDefines 9 of this component's classes at line 2195, 2196, 2197, 2198, 2201, 2202, 2203, 2204, 2205. Override those rules, or the custom properties they read, in a stylesheet loaded after it.