SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

1
0

Hello,
I’ve been looking for the documentation of how to customize the look of the chart. I have a black/dark gray checker pattern that seems to be the default. I would like to:
1. Change the background to white, no checkerboard pattern
here is the documentation for chart background but it does not show me how to change it to white. https://www.scichart.com/documentation/ios/v2.x/webframe.html#The%20SciChartSurface%20Type.html
I have found through experimentation the I can call

surface.backgroundColor

But that just changes the axis background color

2. Make the text larger on the axis.
here is the documentation for the axis https://www.scichart.com/documentation/ios/v2.x/webframe.html#Adding%20an%20Axis%20to%20a%20SciChartSurface.html
I see these lines that were provided but they won’t compile because Xcode doesn’t know what defaultFontSize is and there are no other references to it and I still don’t see a way to set the size.

textFormat.fontName = SCSFontsName.defaultFontName
textFormat.fontSize = SCSFontSizes.defaultFontSize

I think it would be helpful to create a walkthrough for iOS that shows how to customize the background and axis. I’ve looked through the samples provided but the files are huge and I get lost trying to figure it out.
Thanks,
Warren

Version
2.0.1.1758
  • You must to post comments
0
0

Good day

1) There is one more property for background SCIChartSurface.renderableSeriesAreaFill
And to get rid of checkered appereance you have to disable drawing bands on X and Y axis. Property for that axis.style.drawMajorBands

2) Font name is NSString. There is a list of possible font names: http://iosfonts.com/
Font size is float. Internaly we create font using [UIFont fontWithName:_fontName size:_fontSize]

I agree that our documentation is not easy to use at the current state. We are considering improving it.

Best regards
Andrii
SciChart iOS Developer

  • You must to post comments
0
0

Hi Andril,
Thanks for the reply. I have changed the surface yet still have a black/gray background as shown in the photo.

fileprivate func addSurface() {
    surface = SCIChartSurface(frame: self.view.bounds)
    surface.translatesAutoresizingMaskIntoConstraints = true
    surface.frame = self.view.bounds
    surface.autoresizingMask = [.flexibleHeight, .flexibleWidth]
    // background color
    surface.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
    surface.renderableSeriesAreaFill.color = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
    self.view.addSubview(surface)
}

I’m still unable to change to font size. I’ll start another post so this thread can be just about the surface background

Images
  • You must to post comments
0
0

Hi Warren,

Our team has created an example showing how to style various elements of the iOS SCIChartSurface:

iOS Chart Custom Styling Example

enter image description here

This shows how to style font sizes, font colors as well as the chart background and viewport background.

Does it answer your questions? Is there anything else you would like to see added to this example?

Best regards,
Andrew

  • You must to post comments
0
0

Thanks for your help Andril !!!

I have the font size sorted out. Thanks for creating the custom style demo. The comments helped me understand the properties better.

I’m still having issues with the checkerboard background. I tried what you suggested

xAxis.style.drawMajorBands = false
yAxis.style.drawMajorBands = false

but that rendered the entire background black and I am looking for just a plain white chart so it can be viewed easily outdoors. I’ll attach a screenshot of what I have in the sie. It’s close just have black between the major gridlines. here is what my axix set up looks like as well. Thanks for your help! Warren

fileprivate func addAxis(BarsToShow: Int) {

    let totalBars = lastPriceList.count
    let rangeStart = totalBars - BarsToShow
    // horizontal - Date axis
    let xAxis = SCICategoryDateTimeAxis()
    xAxis.visibleRange = SCIDoubleRange(min: SCIGeneric(rangeStart), max: SCIGeneric(totalBars))
    xAxis.growBy = SCIDoubleRange(min: SCIGeneric(0.1), max: SCIGeneric(0.1))

    // this made some of the backgroung white
    xAxis.style.gridBandBrush = SCISolidBrushStyle(color: .white)
    //xAxis.style.drawMajorBands = false -- this did not render a white background


    // Date changing major grid line color and thicknes. major grid line is line at the label position
    xAxis.style.majorGridLineBrush = SCISolidPenStyle(color: .lightGray, withThickness: 0.5)

    // changing minor grid line color and thicknes. minor grid lines are located between major grid lines -- ??
    xAxis.style.minorGridLineBrush = SCISolidPenStyle(color: .lightGray, withThickness: 0.5)
    // date axis label color
    xAxis.style.labelStyle.color = .darkGray
    // axis label font
    xAxis.style.labelStyle.fontName = "Helvetica"
    // axis label font size
    xAxis.style.labelStyle.fontSize = 14
    // drawing ticks is enabled by default. That lines are added just to show that such propertyes exist and what they do
    xAxis.style.drawMajorTicks = true
    xAxis.style.drawMinorTicks = true
    // drawing labels is enabled by default to. If set to false, there will be no labels on axis. Labels are placed at majot tick position
    xAxis.style.drawLabels = true
    // major ticks are marks on axis that are located at label
    // length of major tick in points
    xAxis.style.majorTickSize = 5

    // color and thicknes of major tick - On the Date axis
    xAxis.style.majorTickBrush = SCISolidPenStyle(color: .darkGray, withThickness: 1)

    // minor ticks are marks on axis that fills space between major ticks
    // length of minor tick in points
    xAxis.style.minorTickSize = 2
    // color and thicknes of minor tick  -- ??
    xAxis.style.minorTickBrush = SCISolidPenStyle(color: .darkGray, withThickness: 1)
    surface.xAxes.add(xAxis)

    // verticle - Price Axis
    let yAxis = SCINumericAxis()
    yAxis.growBy = SCIDoubleRange(min: SCIGeneric(0.1), max: SCIGeneric(0.1))

    yAxis.axisAlignment = .right
    yAxis.autoRange = .always
    //yAxis.axisId = "PrimaryAxisId"

    // setting axis band color. Band is filled area between major grid lines
    yAxis.style.gridBandBrush = SCISolidBrushStyle(color: .white)
    // yAxis.style.drawMajorBands = false - this did not render a white background

    // changing major grid line color and thicknes. major grid line is line at the label position
    yAxis.style.majorGridLineBrush = SCISolidPenStyle(color: .lightGray, withThickness: 1)

    // changing minor grid line color and thicknes. minor grid lines are located between major grid lines
    yAxis.style.minorGridLineBrush = SCISolidPenStyle(color: .white, withThickness: 0.5)

    // set custom label provider for axis. Label provider defines text for labels
    //yAxis.labelProvider = ThousandsLabelProvider()
    // axis label color
    yAxis.style.labelStyle.color = .darkGray
    // axis label font size
    yAxis.style.labelStyle.fontSize = 12
    // major ticks are marks on axis that are located at label
    // length of major tick in points
    yAxis.style.majorTickSize = 3

    // color and thicknes of major tick
    yAxis.style.majorTickBrush = SCISolidPenStyle(color: .darkGray, withThickness: 0.5)
    // minor ticks are marks on axis that fills space between major ticks
    // length of minor tick in points
    yAxis.style.minorTickSize = 2
    // color and thicknes of minor tick
    yAxis.style.minorTickBrush = SCISolidPenStyle(color: .lightGray, withThickness: 0.5)


    surface.yAxes.add(yAxis)
}
Images
  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.