Pre loader

Tag: SCIChartSurface Background

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

0 votes
0 answers
4k views

My application supports two themes (dark/light) for the charts. The background of the chart will be set to black if the dark mode is applied, and white if the light mode applied. It works well with the line chart. But there is strange grey background appeared in the heatmap chart when light mode is applied (Please check the attached screenshots). The color of gradient stop of offset 0 (min. heatmap zValues) is set to transparent and it works well with the dark mode. Do you know what’s wrong in my case?

Dark theme object applied to the chart:

{...new SciChartJSDarkTheme(), ...{
        sciChartBackground: "#1c1c1c",
        axisTitleColor: "#dee2e6",
        labelBorderBrush: "#dee2e6",
        tickTextBrush: "#dee2e6",
        majorGridLineBrush: "#1F3D68",
        minorGridLineBrush: "#102A47",
    }

Light theme object applied to the chart:

{...new SciChartJSLightTheme(), ...{
        sciChartBackground: "#fff",
        axisTitleColor: "#333",
        labelBorderBrush: "#333",
        tickTextBrush: "#333",
    }}

Heatmap graditentStops:

[
    { offset: 1, color: COLORS.DARK_RED },
    { offset: 0.8, color: COLORS.RED },
    { offset: 0.6, color: COLORS.YELLOW },
    { offset: 0.5, color: COLORS.GREEN },
    { offset: 0.4, color: COLORS.BLUE },
    { offset: 0.01, color: COLORS.DARK_BLUE },
    { offset: 0, color: "Transparent" },
]
0 votes
10k views

I am using SCIStackedMountainRenderableSeries in my iOS application, I am always getting chart background as black grids, I want to make it clear or white background. How can I do that?

I have tried

sciChartSurface?.backgroundColor = UIColor.white
sciChartSurface?.applyThemeProvider(nil)

That did not worked, Please help.

0 votes
6k views

Hello Scichart Team again,

I’m trying to replicate anything like this (check Screenshot_2.png).

I can update the scichart background, but I just wanted to have a single color in the background, but it seems that there is an overlap of colors in X / Y as I show in the next printscreen (check Screenshot_3.png)

How I can solve this?

Waiting for feedback.

Many thanks,

Pedro Cruz

0 votes
10k views

I am using latest version of SciChart through Pods. I am using trial key for now.

I have made all the views under the chart clear. And have tried the code below but the background appears to be shades of black.

     let yAxis = SCINumericAxis()
     let xAxis = 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)
  • Ayush Jain asked 5 years ago
  • last active 5 years ago
1 vote
8k views

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))
    }
}
  • Ayush Jain asked 5 years ago
  • last active 5 years ago
Showing 5 results

Try SciChart Today

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

Start TrialCase Studies