Chart theme

Now you can set your own dark and light theme colors for the chart.

To set your own values for the chart theme, you can provide a Chart.Theme instance through SettingsManager.

ChartColor as color instance

To represent colors in the chart, we use a custom class ChartColor that is subclassed from UIColor


  let chartColor1 = ChartColor(UIColor.black)
  let chartColor2 = "#ff0000"
  let chartColor3 = "rgba(235,76,76,1)"

Mutating methods for update scopes of parameters


public extension Chart.Theme {
  mutating func updateBackground(color: ChartColor) {
      chartAreaTheme.backgroundColor = color
      xAxis.backgroundColor = color
      yAxis.backgroundColor = color
      crossTool.labelBoxColor = color
  }
  
  mutating func updateScatter(color: ChartColor) {
      scatterPlot.mainColor = color
  }
  
  mutating func updateUp(color: ChartColor) {
      barTheme.upColor = color
      lineTheme.upColor = color
      equivolumeTheme.upColor = color
      baseLineTheme.upperSectionStrokeColor = color
  }
  
  mutating func updateDown(color: ChartColor) {
      barTheme.downColor = color
      lineTheme.downColor = color
      equivolumeTheme.downColor = color
      baseLineTheme.lowerSectionStrokeColor = color
  }
  
  mutating func updateNone(color: ChartColor) {
      barTheme.noneColor = color
      equivolumeTheme.noneColor = color
      lineTheme.noneColor = color
      histogram.noneCap = color
      histogram.noneBottom = color
      histogram.noneBright = color
  }
  
  mutating func updateWatermark(color: ChartColor) {
      waterMarkTheme.firstRowColor = color
      waterMarkTheme.secondRowColor = color
      waterMarkTheme.thirdRowColor = color
  }
  
  mutating func updateGrid(color: ChartColor) {
      chartAreaTheme.gridColor = color
  }
  
  mutating func updateValuesOnScale(color: ChartColor) {
      yAxis.labelTextColor = color
      xAxis.labelTextColor = color
  }
  
  mutating func updateAreaTheme(color: ChartColor) {
      areaTheme.startColor = ChartColor(color.withAlphaComponent(0.4))
      areaTheme.stopColor  = ChartColor(color.withAlphaComponent(0.1))
      areaTheme.lineColor  = ChartColor(color.withAlphaComponent(1))
  }
  
  mutating func updateBullishBody(color: ChartColor) {
      activeCandleTheme.upColor = color
      candleTheme.upColor = color
      barTheme.upColor = color
      histogram.upBottom = color
      histogram.upBright = color
      histogram.upCap = color
  }
  
  mutating func updateBullishBorder(color: ChartColor) {
      activeCandleTheme.upWickColor = color
      candleTheme.upWickColor = color
  }
  
  mutating func updateBearishBody(color: ChartColor) {
      activeCandleTheme.downColor = color
      candleTheme.downColor = color
      barTheme.downColor = color
      histogram.downBottom = color
      histogram.downBright = color
      histogram.downCap = color
  }
  
  mutating func updateBearishBorder(color: ChartColor) {
      activeCandleTheme.downWickColor = color
      candleTheme.downWickColor = color
  }
  
  mutating func updateDoji(color: ChartColor) {
      activeCandleTheme.noneColor = color
      activeCandleTheme.noneWickColor = color
      candleTheme.noneColor = color
      candleTheme.noneWickColor = color
  }
}

Examples of usage:

Modify default theme


  var darkTheme = Chart.Theme.dark
  darkTheme.candleTheme.upColor = "#ff0000"
  darkTheme.candleTheme.downColor = "rgba(235,76,76,1)"
  darkTheme.candleTheme.noneColor = ChartColor(UIColor.white)
  // update chart view controller
  chartViewController.settingsManager.chartThemeDark = darkTheme

Create Chart.Theme from scratch


let theme = Chart.Theme(
  candleTheme: .init(
      upColor: "rgba(103,173,109,1)",
      downColor: "rgba(235,76,76,1)",
      noneColor: "rgba(1,1,1,1)",
      upWickColor: "rgba(103,173,109,1)",
      downWickColor: "rgba(235,76,76,1)",
      noneWickColor: "rgba(1,1,1,1)"
  ),
  activeCandleTheme: .init(
      upColor: "rgba(98,201,93,1)",
      downColor: "rgba(255,47,47,1)",
      noneColor: "rgba(1,1,1,1)",
      upWickColor: "rgba(98,201,93,1)",
      downWickColor: "rgba(255,47,47,1)",
      noneWickColor: "rgba(0,0,0,1)"
  ),
  barTheme: .init(
      upColor: "rgba(103,173,109,1)",
      downColor: "rgba(235,76,76,1)",
      noneColor: "rgba(1,1,1,1)"
  ),
  lineTheme: .init(
      upColor: "rgba(103,173,109,1)",
      downColor: "rgba(235,76,76,1)",
      noneColor: "rgba(1,1,1,1)"
  ),
  areaTheme: .init(
      lineColor: "rgba(127,120,214,1)",
      startColor: "rgba(169,38,251,0.4)",
      stopColor: "rgba(169,38,251,0.1)"
  ),
  chartAreaTheme: .init(
      backgroundColor: "rgba(255,255,255,1)",
      axisColor: "rgba(128,128,128,1)",
      gridColor: "rgba(229,229,229,1)"
  ),
  scatterPlot: .init(mainColor: "rgba(1,1,1,1)"),
  baseLineTheme: .init(
      lowerSectionStrokeColor: "rgba(235,76,76,1)",
      upperSectionStrokeColor: "rgba(103,173,109,1)",
      lowerSectionFillColor: "rgba(217, 44, 64, 0.07)",
      upperSectionFillColor: "rgba(103,173,109,1)"
  ),
  histogram: .init(
      upCap: "rgba(103,173,109,1)",
      upBottom: "rgba(77,153,83,0.1)",
      upBright: "rgba(77,153,83,0.4)",
      downCap: "rgba(235,76,76,1)",
      downBottom: "rgba(217,44,64,0.1)",
      downBright: "rgba(217,44,64,0.4)",
      noneCap: "rgba(1,1,1,1)",
      noneBottom: "rgba(1,1,1,0.1)",
      noneBright: "rgba(1,1,1,0.4)"
  ),
  highlights: .init(
      noTrading: .init(
          border: "rgba(107,96,86,1)",
          background: "transparent",
          label: "transparent"
      ),
      afterMarket: .init(
          border: "rgba(107,96,86,1)",
          background: "rgba(255, 170, 0, 0.07)",
          label: "transparent"
      ),
      preMarket: .init(
          border: "rgba(107,96,86,1)",
          background: "rgba(38, 251, 149, 0.07)",
          label: "transparent"
      ),
      regular: .init(
          border: "rgba(107,96,86,1)",
          background: "transparent",
          label: "transparent"
      )
  ),
  volume: .init(
      downCapColor: "rgba(99,30,37,1)",
      upCapColor: "rgba(42,72,44,1)",
      noneBarColor: "rgba(0,0,0,0.4)",
      downBarColor: "rgba(42,72,44,1)",
      upBarColor: "rgba(99,30,37,1)",
      noneCapColor: "rgba(0,0,0,0.4)"
  ),
  secondaryChartTheme: [
      .init(
          lineTheme: .init(
              bullColor: "rgba(226,61,25,1)",
              bearColor: "rgba(226,61,25,1)",
              noneColor: "rgba(226,61,25,1)"
          ),
          areaTheme: .init(
              lineColor: "rgba(226,61,25,1)",
              startColor: "rgba(226,61,25,0.8)",
              stopColor: "rgba(226,61,25,0)"
          )
      ),
      .init(
          lineTheme: .init(
              bullColor: "rgba(250,191,64,1)",
              bearColor: "rgba(250,191,64,1)",
              noneColor: "rgba(250,191,64,1)"
          ),
          areaTheme: .init(
              lineColor: "rgba(250,191,64,1)",
              startColor: "rgba(250,191,64,0.8)",
              stopColor: "rgba(250,191,64,0)"
          )
      ),
      .init(
          lineTheme: .init(
              bullColor: "rgba(169,38,251,1)",
              bearColor: "rgba(169,38,251,1)",
              noneColor: "rgba(169,38,251,1)"
          ),
          areaTheme: .init(
              lineColor: "rgba(169,38,251,1)",
              startColor: "rgba(169,38,251,0.8)",
              stopColor: "rgba(169,38,251,0)"
          )
      ),
      .init(
          lineTheme: .init(
              bullColor: "rgba(77,211,240,1)",
              bearColor: "rgba(77,211,240,1)",
              noneColor: "rgba(77,211,240,1)"
          ),
          areaTheme: .init(
              lineColor: "rgba(77,211,240,1)",
              startColor: "rgba(77,211,240,0.8)",
              stopColor: "rgba(77,211,240,0)"
          )
      ),
      .init(
          lineTheme: .init(
              bullColor: "rgba(59,203,91,1)",
              bearColor: "rgba(59,203,91,1)",
              noneColor: "rgba(59,203,91,1)"
          ),
          areaTheme: .init(
              lineColor: "rgba(59,203,91,1)",
              startColor: "rgba(59,203,91,0.8)",
              stopColor: "rgba(59,203,91,0)"
          )
      )
  ],
  waterMarkTheme: .init(
      firstRowColor: "rgba(0,0,0,0.2)",
      secondRowColor: "rgba(0,0,0,0.2)",
      thirdRowColor: "rgba(0,0,0,0.2)"
  ),
  highLowTheme: .init(
      highColor: "rgba(83,83,83,1)",
      lowColor: "rgba(83,83,83,1)"
  ),
  yAxis: .init(
      backgroundColor: "rgba(255,255,255,1)",
      backgroundHoverColor: "rgba(20,20,19,1)",
      labelBoxColor: "rgba(20,20,19,1)",
      labelDescriptionFillColor: "rgba(20,20,19,1)",
      labelTextColor: "rgba(209,209,209,1)",
      labelInvertedTextColor: "rgba(20,20,19,1)",
      rectLabelTextColor: "rgba(255,255,255,1)",
      rectLabelInvertedTextColor: "rgba(20,20,19,1)",
      zeroPercentLine: "rgba(55,55,54,1)"
  ),
  xAxis: .init(
      backgroundColor: "rgba(255,255,255,1)",
      labelBoxColor: "rgba(20,20,19,1)",
      labelTextColor: "rgba(209,209,209,1)"
  ),
  crossTool: .init(
      lineColor: "rgba(255,91,36,1)",
      labelTextColor: "rgba(255,91,36,1)",
      labelBoxColor: "rgba(255,255,255,1)"
  ),
  events: .init(
      earnings: .init(color: "rgba(235,76,76,1)"),
      dividends: .init(color: "rgba(169,38,251,1)"),
      splits: .init(color: "rgba(244,187,63,1)"),
      conferenceCalls: .init(color: "rgba(48,194,97,1)")
  ),
  instrumentInfo: .init(textColor: "#aeb1b3"),
  paneResizer: .init(
      lineColor: "rgba(229,229,229,1)",
      bgColor: "rgba(20,20,19,1)",
      bgHoverColor: "rgba(55,55,54,0.6)"
  ),
  labels: .init(
      lastPrice: .init(
          textNegative: "rgba(255,255,255,1)",
          textPositive: "rgba(255,255,255,1)",
          textSelected: "rgba(0,0,0,1)",
          boxNegative: "rgba(235,76,76,1)",
          boxPositive: "rgba(103,173,109,1)",
          boxSelected: "rgba(255,255,255,1)"
      ),
      countdownToBarClose: .init(
          textNegative: "rgba(255,255,255,1)",
          textPositive: "rgba(255,255,255,1)",
          textSelected: "rgba(255,255,255,1)",
          boxNegative: "rgba(235,76,76,1)",
          boxPositive: "rgba(103,173,109,1)",
          boxSelected: "rgba(255,255,255,1)"
      ),
      highLow: .init(
          high: .init(
              boxColor: "rgba(107,96,86,1)",
              textColor: "rgba(0,0,0,1)",
              descriptionText: "High"
          ),
          low: .init(
              boxColor: "rgba(107,96,86,1)",
              textColor: "rgba(0,0,0,1)",
              descriptionText: "Low"
          )
      ),
      bidAsk: .init(
          bid: .init(
              boxColor: "rgba(103,173,109,1)",
              textColor: "rgba(0,0,0,1)",
              descriptionText: "Bid"
          ),
          ask: .init(
              boxColor: "rgba(235,76,76,1)",
              textColor: "rgba(0,0,0,1)",
              descriptionText: "Ask"
          )
      ),
      prePostMarket: .init(
          post: .init(
              boxColor: "rgba(38,251,149,1)",
              textColor: "rgba(20,20,19,1)",
              descriptionText: "Post"
          ),
          pre: .init(
              boxColor: "rgba(255,170,0,1)",
              textColor: "rgba(20,20,19,1)",
              descriptionText: "Pre"
          )
      ),
      prevDayClose: .init(
          boxColor: "rgba(107,96,86,1)",
          textColor: "rgba(0,0,0,1)"
      )
  ),
  legend: .init(
      upColor: "rgba(103,173,109,1)",
      downColor: "rgba(235,76,76,1)",
      noneColor: "rgba(1,1,1,1)"
  ),
  equivolumeTheme: .init(
      upColor: "rgba(103,173,109,1)",
      downColor: "rgba(235,76,76,1)",
      noneColor: "rgba(1,1,1,1)"
  ),
  drawingsTheme: .init(
      points: .init(
          defaultKeyPoint: .init(
              shape: "circle",
              radius: 4.5,
              fillStyle: "rgba(255,91,36,1)",
              lineWidth: 0,
              lineColor: "rgba(20,20,19,1)",
              opacity: 1
          ),
          activeKeyPoint: .init(
              shape: "circle",
              radius: 4.5,
              fillStyle: "rgba(255,91,36,1)",
              lineWidth: 0,
              lineColor: "rgba(20,20,19,1)",
              opacity: 1
          ),
          defaultHoverKeyPoint: .init(
              shape: "circle",
              radius: 4.5,
              fillStyle: "rgba(255,91,36,1)",
              lineWidth: 0,
              lineColor: "rgba(20,20,19,1)",
              opacity: 1
          ),
          activeHoverKeyPoint: .init(
              shape: "circle",
              radius: 4.5,
              fillStyle: "rgba(255,91,36,1)",
              lineWidth: 0,
              lineColor: "rgba(20,20,19,1)",
              opacity: 1
          ),
          addingKeyPoint: .init(
              shape: "circle",
              radius: 4.5,
              fillStyle: "rgba(255,91,36,1)",
              lineWidth: 0,
              lineColor: "rgba(20,20,19,1)",
              radiusExtension: 12,
              opacity: 1
          )
      ),
      xAxis: .init(
          labelColor: "rgba(255,91,36,1)",
          highlightColor: "rgba(255,91,36,0.1)"
      ),
      yAxis: .init(
          labelColor: "rgba(255,91,36,1)",
          highlightColor: "rgba(255,91,36,0.1)"
      ),
      textBg: "rgba(255,255,255,0.8)",
      textColor: "rgba(255,91,36,1)"
  )
)

ChartColor as color instance​

Mutating methods for update scopes of parameters​

Examples of usage:​

Modify default theme​

Create Chart.Theme from scratch​

ChartColor as color instance

Mutating methods for update scopes of parameters

Examples of usage:

Modify default theme

Create Chart.Theme from scratch