Pre loader

Transparent Sci Chart Surface background in iOS not working

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

I want a transparent background of SCI Chart so that view below the chart are visible. I have tried various solutions but it is still turning out to be black. Below is my code for the same. Can anyone please help me out ? I am setting SCIChartSurface backgroundColor property to achieve it but it doesnt seem to work.

func initColumnChart() {

    let xAxis = SCINumericAxis()
    let yAxis = SCINumericAxis()
    //self.surface.xAxes.add(xAxis)
    //self.surface.yAxes.add(yAxis)
    self.surface.backgroundColor = UIColor.clear
    self.surface.isOpaque = false
    self.surface.renderableSeriesAreaFill = SCISolidBrushStyle(color: UIColor.clear)
    self.surface.renderableSeriesAreaBorder = SCISolidPenStyle(color: UIColor.clear, withThickness: 0)


    let xAxisGridBandBrush = SCISolidBrushStyle(color: UIColor.clear)
    xAxis.style.gridBandBrush = xAxisGridBandBrush

    xAxis.visibleRange = SCIDoubleRange(min: SCIGeneric(-0.6), max: SCIGeneric(8.0))
    xAxis.style.majorTickBrush = SCISolidPenStyle(color: UIColor.white, withThickness: 1)
    xAxis.style.majorTickSize = 5
    xAxis.autoTicks = false
    xAxis.majorDelta = SCIGeneric(1.0)
    xAxis.minorDelta = SCIGeneric(1.0)
    xAxis.labelProvider = UsageXLabelProvider()
    xAxis.style.labelStyle.color = UIColor.white
    xAxis.style.labelStyle.fontName = "Helvetica"
    xAxis.style.labelStyle.fontSize = 14
    xAxis.style.drawLabels = true
    xAxis.style.drawMajorGridLines = false
    xAxis.style.drawMinorGridLines = false
    xAxis.style.drawMajorTicks = true
    xAxis.style.drawMinorTicks = false
    xAxis.tickProvider = YAxisTickProvider(minorTicks: [], majorTicks: [0,1,2,3,4,5,6])



    let yAxisGridBandBrush = SCISolidBrushStyle(color: UIColor.clear)
    yAxis.style.gridBandBrush = yAxisGridBandBrush

    yAxis.style.labelStyle.color = UIColor.white
    yAxis.style.labelStyle.fontName = "Helvetica"
    yAxis.style.labelStyle.fontSize = 14
    yAxis.style.drawLabels = true
    yAxis.visibleRange = SCIDoubleRange(min: SCIGeneric(-1.0), max: SCIGeneric(65))
    yAxis.autoTicks = false
    yAxis.majorDelta = SCIGeneric(1.0)
    yAxis.minorDelta = SCIGeneric(0.2)
    yAxis.style.majorGridLineBrush = SCISolidPenStyle(color: UIColor.white, withThickness: 0.5, andStrokeDash: [5.0,6.0])
    // Style the Minor Gridlines on the YAxis (vertical lines)
    yAxis.style.minorGridLineBrush = SCISolidPenStyle(color: UIColor.white, withThickness: 0.5, andStrokeDash: [5.0, 6.0])
    yAxis.style.drawMajorGridLines = true
    yAxis.style.drawMinorGridLines = true
    yAxis.style.drawMajorTicks = false
    yAxis.style.drawMinorTicks = false
    yAxis.axisAlignment = .left
    //yAxis.labelProvider = DailyFlowrateLabelProvider()
    yAxis.tickProvider = YAxisTickProvider(minorTicks: [0,8,16,24,31,40,48,56], majorTicks: [0,31,62])

    let dataSeries = SCIXyDataSeries(xType: .float, yType: .float)
    dataSeries.appendRangeX([0,1,2,3,4,5,6], y: [52,40,15,48,25,36,20])

    let rSeries = SCIFastColumnRenderableSeries()
    rSeries.dataSeries = dataSeries
    rSeries.paletteProvider = BarsColorPalette()

    SCIUpdateSuspender.usingWithSuspendable(surface) {
        self.surface.xAxes.add(xAxis)
        self.surface.yAxes.add(yAxis)
        self.surface.renderableSeries.add(rSeries)
        //self.surface.chartModifiers = SCIChartModifierCollection(childModifiers: [SCIPinchZoomModifier(), SCIZoomExtentsModifier(), SCIRolloverModifier()])

        //rSeries.addAnimation(SCIWaveRenderableSeriesAnimation(duration: 3, curveAnimation: .easeOut))
    }
}
Version
v2.5.0.2523
Images
  • You must to post comments
1
0

Hello, Ayush Jain.

Seems like the one thing missing is making render surface transparent: self.surface.renderSurface?.isTransparent = true
Here is an example of fully transparent column chart, you can copy paste code in corresponding file from our SwiftDemo app, to test.

 class ColumnChartView: SingleChartLayout {

   override func initExample() {
        self.backgroundColor = UIColor.white
        self.surface.backgroundColor = UIColor.clear
        self.surface.isOpaque = false
        self.surface.renderSurface?.isTransparent = true
        self.surface.renderableSeriesAreaFill = SCISolidBrushStyle(color: UIColor.clear)
        self.surface.renderableSeriesAreaBorder = SCISolidPenStyle(color: UIColor.clear, withThickness: 0)

        let xAxis = SCINumericAxis()
        xAxis.style.drawMajorBands = false
        xAxis.style.drawMajorTicks = false
        xAxis.style.drawMinorTicks = false
       xAxis.style.drawMajorGridLines = false
       xAxis.style.drawMinorGridLines = false

       let yAxis = SCINumericAxis()
       yAxis.style.drawMajorBands = false
       yAxis.style.drawMajorTicks = false
       yAxis.style.drawMinorTicks = false
       yAxis.style.drawMajorGridLines = false
       yAxis.style.drawMinorGridLines = false
       yAxis.growBy = SCIDoubleRange(min: SCIGeneric(0), max: SCIGeneric(0.1))
       let dataSeries = SCIXyDataSeries(xType: .int32, yType: .int32)
       let yValues = [50, 35, 61, 58, 50, 50, 40, 53, 55, 23, 45, 12, 59, 60];
       for i in 0..<yValues.count {
            dataSeries.appendX(SCIGeneric(i), y: SCIGeneric(yValues[i]))
        }

      let rSeries = SCIFastColumnRenderableSeries()
      rSeries.dataSeries = dataSeries
      rSeries.paletteProvider = ColumnsTripleColorPalette()

      SCIUpdateSuspender.usingWithSuspendable(surface) {
          self.surface.xAxes.add(xAxis)
          self.surface.yAxes.add(yAxis)
          self.surface.renderableSeries.add(rSeries)
          self.surface.chartModifiers = SCIChartModifierCollection(childModifiers: [SCIPinchZoomModifier(), SCIZoomExtentsModifier(), SCIRolloverModifier()])

          rSeries.addAnimation(SCIWaveRenderableSeriesAnimation(duration: 3, curveAnimation: .easeOut))
      }
  }

}

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies