search

willdale / SwiftUICharts

A charts / plotting library for SwiftUI. Works on macOS, iOS, watchOS, and tvOS and has accessibility features built in.
MIT License
843 stars 105 forks source link

Q: space for infoBox #176

Open mvolkmann opened 2 years ago

mvolkmann commented 2 years ago

How does a LineChart know how much space to leave between the metadata title and the top of the chart for displaying and infoBox when the user taps on the chart?

mvolkmann commented 2 years ago

When I display an infoBox, it throws off the alignment of the axes. The x-axis no longer starts at the bottom of the y-axis and instead is moved part way up on the y-axis.

mvolkmann commented 2 years ago

In my LineChartStyle I have the following:

                infoBoxPlacement: .infoBox(isStatic: false),
                infoBoxContentAlignment: .vertical,
                infoBoxBorderColour: Color.primary,
                infoBoxBorderStyle: StrokeStyle(lineWidth: 1),
willdale commented 2 years ago

The space is set by the view modifier .infoBox(chartData: data, height: 140), the default set to 70.

I'm not sure what exactly the issue you're facing is, could you post a screenshot please?

It might be the order of the view modifiers as each one wraps a stack layer around those that come before. .infoBox should probably be near the end of the chain.

I just noticed a placement issue with with the box, I'll add I PR for it but I don't think its the issue that you are facing.

mvolkmann commented 2 years ago

Here is a screen shot that shows the issue. The value for "Mark" is 10, but notice that the y-axis has shifted down so that the "10.00" y-axis label isn't lined up properly. I believe this happens due to the infoBox height IMG_5884 .

mvolkmann commented 2 years ago

Here is my code that creates the chart:

        LineChart(chartData: chartData)
            .pointMarkers(chartData: chartData)
            .touchOverlay(chartData: chartData, formatter: numberFormatter)
            .xAxisLabels(chartData: chartData)
            .yAxisLabels(
                chartData: chartData,
                formatter: numberFormatter,
                colourIndicator: .style(size: 12)
            )
            .headerBox(chartData: chartData)
            .legends(
                chartData: chartData,
                columns: [GridItem(.flexible()), GridItem(.flexible())]
            )
            .infoBox(chartData: chartData)
            .id(UUID())
            .frame(
                minWidth: 300,
                maxWidth: Double.infinity,
                minHeight: 300,
                idealHeight: 450,
                maxHeight: 600,
                alignment: .center
            )
            .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 50))