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
    • Guest
    • 4 weeks ago
    ugg myynti | ugg | ugg saappaat.UGG Classic Short Boots Halvat joulupäivänäUS Dollar Euro GB Pound Canadian Dollar Australian Dollar Jappen Yen Norske Krone Swedish Krone Danish Krone CNYRyhmätNaisten UGG Ultra Tall 5245 Naisten UGG Kensington Saappaat Naisten UGG Adirondack Tall Naisten UGG Bailey Button Naisten UGG Cardy Boots Naisten UGG Classic Tall Boots Naisten UGG FOX turkis saappaat Naisten UGG Sundance II Naisten UGG Ultimate Short Ugg Boots For Kids UGG Boots Special Style Lyhyt UGG Classic Paisley Boots UGG Classic Short Boots UGG Jimmy Choo Kengät 5829 UGG Mall Classic Mini 5854 UGG Metallic Tall 5812 UGG Neulo Boots 5879 UGG Nightfall Boots 5359 UGG Roxy Boots UGG Sheepskin Cuff saappaat 3166 UGG tupsu saappaat 5835MyydyimmätUGG Classic Short Kimaltelee Saappaat Gold 3161 Black Friday €807.24  €123.69Säästä: 85% Halvat Naisten Classic Short UGG Boots 5825 Chestnut €545.91  €108.81Säästä: 80% Halvat Naisten Classic Short UGG Boots 5825 In Black €533.82  €106.02Säästä: 80%Esittelyssä – … 2013 UGG Jimmy Choo Boots 5829 Gold€916.98  €128.34Säästä: 86%Naisten Adirondack Tall UGG Boots Chocolate Myytävänä€885.36  €151.59Säästä: 83%2013 UGG 5854 Mall Classic Mini Boots Chocolate€646.35  €103.23Säästä: 84%Kotiin ::  UGG Classic Short BootsUGG Classic Short BootsListattuna 1 – 21 (24 tuotteesta)  1  2   >> 2013 UGG Classic Short Metallic Boots 5842 BlueUGG 5842 Naisten Kengät Silver on nyt saatavilla uusi…€619.38  €114.39Säästä: 82% 2013 UGG Classic Short Metallic Boots 5842 Rose GoldUGG 5842 Naisten Kengät Silver on nyt saatavilla uusi…€543.12  €115.32Säästä: 79% Halvat Naisten Classic Short UGG Boots 5825 aprikoosiYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€732.84  €106.02Säästä: 86% Halvat Naisten Classic Short UGG Boots 5825 ChestnutYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€545.91  €108.81Säästä: 80% Halvat Naisten Classic Short UGG Boots 5825 harmaaYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€618.45  €112.53Säästä: 82% Halvat Naisten Classic Short UGG Boots 5825 In BlackYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€533.82  €106.02Säästä: 80% Halvat Naisten Classic Short UGG Boots 5825 In BlueYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€651.00  €106.95Säästä: 84% Halvat Naisten Classic Short UGG Boots 5825 In ChocolateYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€687.27  €100.44Säästä: 85% Halvat Naisten Classic Short UGG Boots 5825 In RedYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€654.72  €97.65Säästä: 85% Halvat Naisten Classic Short UGG Boots 5825 PurpleYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€586.83  €112.53Säästä: 81% Halvat Naisten Classic Short UGG Boots 5825 ruskeaYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€493.83  €112.53Säästä: 77% Halvat Naisten Classic Short UGG Boots 5825 tummanharmaaYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€676.11  €111.60Säästä: 83% Halvat Naisten Classic Short UGG Boots 5825 VanillaYksi UGG ? Australian rakkaimmat siluetteja ,Classic…€725.40  €112.53Säästä: 84% Halvat Naisten Classic Short UGG Leopard Boots 5825Yksi UGG ? Australian rakkaimmat siluetteja ,Classic…€563.58  €107.88Säästä: 81% UGG Classic Short Kimaltelee Kengät Musta 3161 Black FridayUGG Classic Kimaltelee saappaat ovat erittäin lämmin ja…€922.56  €121.83Säästä: 87% UGG Classic Short Kimaltelee Saappaat Gold 3161 Black FridayUGG Classic Kimaltelee saappaat ovat erittäin lämmin ja…€807.24  €123.69Säästä: 85% UGG Classic Short Kimaltelee Saappaat hopea 3161 Black FridayUGG Classic Kimaltelee saappaat ovat erittäin lämmin ja…€921.63  €114.39Säästä: 88% UGG Classic Short Kimaltelee Saappaat Purple 3161 Black FridayUGG Classic Kimaltelee saappaat ovat erittäin lämmin ja…€646.35  €121.83Säästä: 81% UGG Classic Short Kimaltelee Saappaat Red 3161 Black FridayUGG Classic Kimaltelee saappaat ovat erittäin lämmin ja…€750.51  €121.83Säästä: 84% UGG Classic Tall Kimaltelee Saappaat Gold 3162 Black FridayUGG Classic Kimaltelee saappaat ovat erittäin lämmin ja…€978.36  €86.49Säästä: 91% UGG Classic Tall Kimaltelee saappaat hopea 3162 Black FridayUGG Classic Kimaltelee saappaat ovat erittäin lämmin ja…€610.08  €90.21Säästä: 85%Listattuna 1 – 21 (24 tuotteesta)  1  2   >>  ryhmiin kuuluvat Miehet UGG Boots Naiset Ugg UGG KIDS Tiedot maksu Toimitusehdot Asiakaspalvelu Ota meihin yhteyttä Tukkukauppa maksu&laivaus Copyright u0026 copy; 2017UGG Maavara Store Online. Powered byUGG Maavara Store Online, Inc.ugg kengät naisille ugg saappaat ulostulo UGG saappaat 5842 blog UGG saappaat 5825 About menuggboots.top blog
  • 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.

SciChart WPF v5 is here! Use the discount code SCICHARTV5 to get 15% off WPF Charts until December 31st!Read More
+