Minimalistic chart

DxChartsView: Quick integration guide

DxChartsView is a Composable for displaying charts in your app. It's simpler and lighter than DxChartsScreen, and provides a direct API to configure and display chart data.

Quick start

Add DxChartsView to your screen and use its API to control the chart:

var api by remember { mutableStateOf<DxChartsApi?>(null) }
DxChartsView(
  modifier = Modifier
      .fillMaxWidth()
      .height(400.dp),
  onApiReady = {
      api = it
  }
)

DxChartsApi overview

Once onApiReady is called, use DxChartsApi to update data and control chart behavior.

/**
* DxChartsApi provides methods to interact with the DxCharts WebView component on Android.
*
* You can:
* - Load and update candle data
* - Apply chart themes and visual settings
* - Control chart tools (crosshair, scaling, watermark, etc.)
*
* To use:
* - Get the API instance from DxChartsView onApiReady callback
* - Wait for isReady before sending commands
*
* Example:
*
* DxChartsView(
*     modifier = Modifier.fillMaxSize(),
*     onApiReady = { api ->
*         lifecycleScope.launch {
*             api.isReady.filter { it }.collect {
*                 api.setCandles(candles)
*             }
*         }
*     }
* )
*
* This API gives you full control over the chart from your Android app,
* so you can display charts and interact with them using a clear, consistent set of methods.
*/
interface DxChartsApi {
  /**
   * Indicates whether the webView is ready to receive data and commands.
   */
  val isReady: StateFlow<Boolean>
  /**
  * Sets the initial candles data.
  */
  fun setCandlesData(candles: List<Candle>)
  /**
   * Add or updates candles without resetting the chart.
   */
  fun updateCandles(candles: List<Candle>)
  /**
   * Sets the chart's timezone for time-based rendering.
   */
  fun setTimezone(timezone: String)
  /**
   * Shows or hides the crosstool.
   */
  fun setCrosstoolVisibility(isVisible: Boolean)
  /**
   * Clears the crosstool.
   */
  fun fireCrosstool()
  /**
   * Sets the visible time range.
   */
  fun setScale(
      from: Long,
      to: Long,
      disableAnimation: Boolean = false
  )
  /**
   * Sets the watermark with the instrument and aggregation.
   */
  fun setWatermark(instrument: InstrumentData, aggregation: String)
  /**
   * Applies a color theme to the chart.
   */
  fun setTheme(colors: Colors)
  /**
   * Sets the chart type.
   */
  fun setChartType(type: ChartType)
  /**
   * Shows or hides candle wicks.
   */
  fun setWicksVisibility(isVisible: Boolean)
  /**
   * Shows or hides horizontal grid lines.
   */
  fun setHorizontalGridVisibility(isVisible: Boolean)
  /**
   * Shows or hides vertical grid lines.
   */
  fun setVerticalGridVisibility(isVisible: Boolean)
  /**
   * Shows or hides high/low price markers on candles.
   */
  fun setHighLowVisibility(isVisible: Boolean)
  /**
   * Shows or hides the watermark.
   */
  fun setWatermarkVisibility(isVisible: Boolean)
  /**
   * Turns automatic vertical scaling on or off.
   */
  fun setAutoScale(isEnable: Boolean)
  /**
   * Inverts the vertical price scale.
   */
  fun invertScale(isEnable: Boolean)
  /**
   * Sets the price scale type.
   */
  fun setScaleType(type: ScaleType)
  /**
   * Shows or hides volume bars.
   */
  fun setVolumesVisibility(isVisible: Boolean)
  /**
   * Shows or hides highlight markers on candles or bars.
   */
  fun setHighlightsVisibility(isVisible: Boolean)
}