# Joystick Examples and Reference

### Default Joystick

An example of a default Joystick without any extra properties.

    using Dash
    using DashDaq

    external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

    app = dash(external_stylesheets=external_stylesheets)

    app.layout = html_div([
      daq_joystick(
          id="my-joystick",
          label="Default",
          angle=0
      ),
      html_div(id="joystick-output")
    ])

    callback!(app,
      Output("joystick-output", "children"),
      [Input("my-joystick", "angle"),
       Input("my-joystick", "force")]) do angle, force
      return ["Angle is $angle",
              html_br(),
              "Force is $force"]
    end

    run_server(app, "0.0.0.0", debug=true)

Default
Angle is 0
Force is None

### Label

Change the label and label orientation with `label` and `labelPosition`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_joystick(
      label="Label",
      labelPosition="bottom"
    )

    run_server(app, "0.0.0.0", debug=true)

Label

### Size

Change the size of the joystick with `size`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_joystick(
      size=250
    )

    run_server(app, "0.0.0.0", debug=true)

## Joystick Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

`id` (String; optional): The ID used to identify the Joystick in Dash callbacks.

`angle` (Real; optional): Joystick angle in degrees, 0 = right, 90 = up, 180 = left, 270 = down.

`force` (Real; optional): Joystick force: distance between cursor and center in big-circle radii.

`size` (Real; default `100`): Size (width) of the component in pixels.

`theme` (Dict; default `light`): Theme configuration to be set by a ThemeProvider.

`label` (Dict; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties.

`label` is a String | Dict with keys:

- `label` (String; optional)

- `style` (Dict; optional)

`labelPosition` (a value equal to: 'top' or 'bottom'; default `'top'`): Where the indicator label is positioned.

`className` (String; optional): Class to apply to the root component element.

`style` (Dict; optional): Style to apply to the root component element.