Skip to main content

Drawings and DrawingProperties toolbar customization

The drawings toolbar supports full customization to allow flexible integration in your application.

You can:

  • Configure the drawings toolbar with only the buttons you need.

  • Use default buttons or integrate custom ones.

  • Provide a custom button implementation, including its icon, checked state, and click behavior.

  • Use default button callbacks in your custom UI

Available Drawing Types​

The following drawing types are available for selection:

// Trend Lines
DrawingType.TREND_LINE
DrawingType.EXTENDED_LINE
DrawingType.PRICE_LINE
DrawingType.INFO_LINE
DrawingType.ARROW
DrawingType.HORIZONTAL_RAY
DrawingType.RAY
DrawingType.TIME_LINE
DrawingType.TREND_CHANNEL
DrawingType.RANGE_VOLUME_PROFILE
DrawingType.ANCHORED_VOLUME_PROFILE
DrawingType.REGRESSION_TREND
// Fibonacci and Ganns
DrawingType.PITCHFORK
DrawingType.FIB_RAYS
DrawingType.FIB_ARCS
DrawingType.FIB_CIRCLES
DrawingType.FIB_RETRACEMENT
DrawingType.FIB_EXTENSION
DrawingType.FIB_CHANNEL
DrawingType.FIB_TIMEZONE
DrawingType.FIB_TIME_EXTENSION
DrawingType.FIB_TIME_RATIOS
DrawingType.GANN_SQUARE
DrawingType.GANN_BOX
DrawingType.GANN_FAN
DrawingType.FIB_SPIRAL
// Markups
DrawingType.HIGHLIGHTER
DrawingType.BRUSH
DrawingType.PATH
DrawingType.CURVE
DrawingType.ARC
DrawingType.ARROW_UP
DrawingType.ARROW_DOWN
DrawingType.OVAL
DrawingType.RECTANGLE
DrawingType.CYCLE_BRACKETS
// Elliotts
DrawingType.ELLIOTT_IMPULSE
DrawingType.ELLIOTT_CORRECTION
// Ranges
DrawingType.PRICE_RANGE
DrawingType.DATE_RANGE
DrawingType.DATE_AND_PRICE_RANGE
// Annotations
DrawingType.PRICE_LABEL
DrawingType.CALLOUT
DrawingType.TEXT

Configuring Toolbar Drawing Buttons Based on Available Drawing Types​

To configure which drawings toolbar buttons are shown based on the available drawing types, use the setSelected method on the drawings types repository.

drawingsTypesRepo.setSelected(
  setOf(
      DrawingType.ARC,
      DrawingType.ARROW,
      DrawingType.BRUSH,
  )
)

Adding Custom Buttons​

To include your own buttons in the drawings toolbar, use the DrawingsToolbarButtonConfig.Custom implementation:

var drawingsToolbarConfig: List<DrawingsToolbarButtonConfig> by remember {
  mutableStateOf(
      listOf(
          DrawingsToolbarButtonConfig.Custom(
              name = "Custom ARC",
              content = ToolbarButtonContent.Text(
                  text = "ARC",
                  isEnabled = true,
                  onClick = {
                      drawingsToolbarSelectorController.selectDrawing(DrawingType.ARC)
                  },
              )
          ),
          DrawingsToolbarButtonConfig.Add()
      )
  )
}

Custom Button Content Types​

Text Button​

Use ToolbarButtonContent.Text for text-based buttons:

ToolbarButtonContent.Text(
  text = "My Button",
  isEnabled = true,
  onClick = { /* your logic */ },
  checked = false
)

Icon Button​

Use ToolbarButtonContent.Icon for icon-based buttons:

ToolbarButtonContent.Icon(
  icon = Icons.Default.Star,
  isEnabled = true,
  onClick = { /* your logic */ },
  checked = false
)

Default Buttons​

The following default button types are available:

DrawingsToolbarButtonConfig.Add()  // 'Add' button that opens a list of available drawings

Drawings Toolbar Configuration Example​

Here's a complete example of how to configure the drawings toolbar:

// Configure selected drawing types
drawingsTypesRepo.setSelected(
  setOf(
      DrawingType.ARROW,
      DrawingType.BRUSH,
  )
)
// Configure custom toolbar buttons
var drawingsToolbarConfig: List<DrawingsToolbarButtonConfig> by remember {
  mutableStateOf(
      listOf(
          DrawingsToolbarButtonConfig.Custom(
              name = "Custom ARC",
              content = ToolbarButtonContent.Text(
                  text = "ARC",
                  isEnabled = true,
                  onClick = {
                      drawingsToolbarSelectorController.selectDrawing(DrawingType.ARC)
                  },
              )
          ),
          DrawingsToolbarButtonConfig.Add()
      )
  )
}

Pass this configuration to DxChartsScreen.

DxChartsScreen(
  //...
  drawingsToolbarConfig = drawingsToolbarConfig
)

Building a Custom Drawings Toolbar​

You can fully implement your own UI and manually bind drawing logic. You should create controller and provide callbacks to the view:

val drawingsToolbarSelectorController = DrawingsToolbarSelectorFactory.create(this)
// Example usage
IconButton(onClick = { drawingsToolbarSelectorController.selectDrawing(DrawingType.ARROW) }) { ... }
IconButton(onClick = { drawingsToolbarSelectorController.add() }) { ... }

Button Properties​

ToolbarButtonContent.Text Properties​

  • text: String - The text to display on the button
  • isEnabled: Boolean - Whether the button is enabled
  • onClick: () -> Unit - Click handler
  • checked: Boolean - Whether the button is in checked state (default: false)

ToolbarButtonContent.Icon Properties​

  • icon: ImageVector - The icon to display on the button
  • isEnabled: Boolean - Whether the button is enabled
  • onClick: () -> Unit - Click handler
  • checked: Boolean - Whether the button is in checked state (default: false)

DrawingsToolbarButtonConfig.Custom Properties​

  • name: String - Name of the button (default: "Custom")
  • content: ToolbarButtonContent - The button content (Icon or Text)

DrawingsToolbarButtonConfig.Add Properties​

  • name: String - Name of the button (default: "Add")

DrawingProperties toolbar customization

The drawing properties toolbar controls tools like magnet mode, brush, line width, and color picker. You can both configure its buttons and wire your own UI via the selector controller.

Available Buttons (DrawingPropertiesToolbarButtonConfig)​

Use these default button configs or provide custom ones:

// Defaults
DrawingPropertiesToolbarButtonConfig.Magnet()      // toggle magnet mode
DrawingPropertiesToolbarButtonConfig.Brush()       // toggle brush mode
DrawingPropertiesToolbarButtonConfig.LineWidth()   // open line width selector
DrawingPropertiesToolbarButtonConfig.ColorPicker() // open color picker
// Custom
DrawingPropertiesToolbarButtonConfig.Custom(
  name = "Custom ColorPicker",
  content = ToolbarButtonContent.Text(
      text = "Color",
      isEnabled = true,
      onClick = { /* custom action */ },
  )
)

Wiring configuration into DxChartsScreen​

Pass the drawingPropertiesToolbarConfig list to DxChartsScreen.

var drawingPropertiesToolbarConfig: List<DrawingPropertiesToolbarButtonConfig> by remember {
  mutableStateOf(
      listOf(
          DrawingPropertiesToolbarButtonConfig.Magnet(),
          DrawingPropertiesToolbarButtonConfig.Brush(),
          DrawingPropertiesToolbarButtonConfig.LineWidth(),
          DrawingPropertiesToolbarButtonConfig.ColorPicker(),
      )
  )
}
DxChartsScreen(
  // ...
  drawingPropertiesToolbarConfig = drawingPropertiesToolbarConfig,
)

Building a Custom Drawing Properties Toolbar​

You can fully implement your own UI and manually bind button logic. You should create controller and provide callbacks to the view:

// Create controller (require a ViewModelStoreOwner and DrawingsFirstClickRepo)
val drawingPropertiesToolbarController = DrawingPropertiesToolbarSelectorFactory.create(
  owner = this,
  drawingsRepository = drawingsFirstClickRepo
)
// Example usage in Compose
IconButton(onClick = { drawingPropertiesSelectorController.selectMagnet() }) { /* ... */ }
IconButton(onClick = { drawingPropertiesSelectorController.selectBrush() }) { /* ... */ }
IconButton(onClick = { drawingPropertiesSelectorController.selectLineWidth() }) { /* ... */ }
IconButton(onClick = { drawingPropertiesSelectorController.selectColorPicker() }) { /* ... */ }