Giter Club home page Giter Club logo

Comments (2)

ivnsch avatar ivnsch commented on May 28, 2024

You can create a second chart with only the y axis and remove it from the original chart. And add the view of this chart on top of scrollview.

I tried the steps myself because I wanted to confirm it works, so you get the code ;)

let chart = Chart(
    frame: chartFrame,
    layers: [
        xAxis,
        // removed yAxis
        guidelinesLayer,
        chartPointsLineLayer
    ]
)
// create another chart with only yAxis
let axisChart = Chart(
    frame: CGRectMake(0, 70, yAxis.rect.width + ExamplesDefaults.chartSettings.leading, yAxis.rect.height + ExamplesDefaults.chartSettings.top + 7), // 7 is such that the first x axis label is not cut
    layers: [
        yAxis
    ]
)
scrollView.addSubview(chart.view)
self.view.addSubview(scrollView)
axisChart.view.backgroundColor = UIColor.whiteColor() // opaque background such that we don't see the scrollview's contents behind
self.view.addSubview(axisChart.view) // axisChart view is now over scrollview and will not scroll
self.axisChart = axisChart
self.chart = chart

There's one little issue though with the x-axis labels, as you see the axisChart frame doesn't cover the bottom and you will see the x labels scrolling below it. The reason is if it does it would cut the first x-axis label. One possible solution is to not show a label at the origin of x-axis, then you can set the height of axisChart to cover also the bottom.

Edit: you also have to add axisStrokeWidth / 2 to the width of axis chart.

from swiftcharts.

henrik-d avatar henrik-d commented on May 28, 2024

Wow, what a simple but effective solution. Works like a charm!
Thank you very much.

from swiftcharts.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.