ChartView icon indicating copy to clipboard operation
ChartView copied to clipboard

Flexible Scaling

Open yeonho1 opened this issue 3 years ago • 2 comments

v2 ticket

If I simulate my app with a chart, it goes over the width.

Screen Shot 2020-10-10 at 8 19 17 PM

The width of the chart should be scaled by the width of the device.

yeonho1 avatar Oct 10 '20 11:10 yeonho1

Hi @yeonho1.

I've had similar issue and fixed it by setting the form parameter when creating a new chart.

As form accepts the CGSize, you can simply get the width and height of the current device screen by using UIScreen.main.bounds.width and UIScreen.main.bounds.height respectively. I also multiplied width with the value between 0 and 1. That way you can scale it and give it some space on the edges.

Check out the full example below:

LineChartView(data: [8,23,54,32,12,37,7,23,43], title: "BTC", legend: "Bitcoin", form: CGSize(width: UIScreen.main.bounds.width / 2 * 0.83, height: 50)).padding()

Hope that helps!

maticla avatar Dec 20 '20 20:12 maticla

You can use .frame with width .infinity and after add padding

LineView(data: [8,23,54,32,12,37,7,23,43],
                     title: nil,
                     legend: nil,
                     style: ChartStyle.init(backgroundColor: Color.white,
                                            accentColor: Color.orange,
                                            secondGradientColor: Color.blue,
                                            textColor: Color.orange,
                                            legendTextColor: Color.black,
                                            dropShadowColor: Color.black),
                     valueSpecifier:"%.0f")
                .frame(width: .infinity, height: 400, alignment: .center)
                .padding([.leading, .trailing], 16)

greenzeal avatar Feb 20 '21 23:02 greenzeal