Implementing Charts in Mobile Apps: Libraries and Optimization

Stuttering line charts at 1000 data points? Unresponsive touch, jittery animations—familiar pain. UITableView doesn't lag because it's optimized for years, but a custom LineChart without point caching and clip regions starts stuttering from the first thousand points. Without the right approach, charts become a source of bugs and user complaints. Our experience—10+ years in mobile development, over 50 projects with charts—lets us dodge these pitfalls. Save up to 70% of optimization time. Contact us to discuss your project.

Why Library Choice Is a Key Decision?

The question "which library to use" is resolved by the specific project requirements. Wrong choice leads to rework and poor performance.

For financial apps with candlestick and zoom—choose Syncfusion or native. For health/fitness with simple line charts—fl_chart is enough. For React Native, use react-native-chart-kit with simple charts. For real-time high-frequency data—WebView + ECharts.

What Is Downsampling and Why Is It Critical?

Downsampling reduces the number of data points before rendering. The LTTB algorithm preserves visual shape while discarding redundant points. This gives up to 90% time savings compared to full rendering. Without downsampling, charts with 10,000 points on mid-range Android drop to 15 FPS.

How to Optimize LineChart Without Losing Quality?

A typical mistake is passing the entire array of 5000 points into fl_chart. The LineChart renders every point as a FlSpot, and with touch data enabled, it computes hit-testing for each. On mid-range Android, FPS drops below 20.

Correct approach: apply downsampling before rendering. LTTB is 10x faster than full rendering and gives visually identical results for most scenarios.

List<FlSpot> lttbDownsample(List<FlSpot> data, int threshold) {
  if (data.length <= threshold) return data;

  final sampled = <FlSpot>[data.first];
  final bucketSize = (data.length - 2) / (threshold - 2);

  var a = 0;
  for (var i = 0; i < threshold - 2; i++) {
    final rangeStart = (i * bucketSize + 1).floor();
    final rangeEnd = ((i + 1) * bucketSize + 1).floor().clamp(0, data.length);
    final nextA = ((i + 1) * bucketSize + 1).floor().clamp(0, data.length - 1);

    double maxArea = -1;
    int maxAreaPoint = rangeStart;
    for (var j = rangeStart; j < rangeEnd; j++) {
      final area = (data[a].x * (data[nextA].y - data[j].y) +
              data[nextA].x * (data[j].y - data[a].y) +
              data[j].x * (data[a].y - data[nextA].y))
          .abs() / 2;
      if (area > maxArea) {
        maxArea = area;
        maxAreaPoint = j;
      }
    }
    sampled.add(data[maxAreaPoint]);
    a = maxAreaPoint;
  }
  sampled.add(data.last);
  return sampled;
}

500 points instead of 5000—FPS returns to 60. LTTB reduces rendering time by 10x compared to full dataset.

Downsampling Methods Comparison

For mobile charts, LTTB is the optimal balance.

3-Step Downsampling Integration Guide

1. Choose LTTB algorithm—best speed-quality ratio for line charts.
2. Prepare data—filter out nulls and NaNs, convert to FlSpot array.
3. Integrate into LineChart—replace source array with lttbDownsample result before passing to LineChartData.

Data Entry Animations

Line drawing animation left-to-right is a popular UX pattern. On Flutter, use AnimationController + TweenAnimationBuilder, limiting visible points by the animated value t:

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0.0, end: 1.0),
  duration: const Duration(milliseconds: 800),
  curve: Curves.easeOut,
  builder: (context, value, _) {
    final visiblePoints = (allSpots.length * value).round();
    return LineChart(
      LineChartData(
        lineBarsData: [
          LineChartBarData(spots: allSpots.take(visiblePoints).toList()),
        ],
      ),
    );
  },
)

For bar charts, animate bar growth using the fromY parameter with an AnimatedContainer.

Real-Time Updates Without FPS Loss

Charts that update every second (metrics, stock data) require calling setState only for changed data. The wrong way: calling setState on the whole screen—rebuilds entire widget tree. The right way: use ValueNotifier + ValueListenableBuilder around only the chart widget.

1. Define a maximum number of displayed points (sliding window).
2. Use ValueNotifier to hold the point list.
3. Update the notifier when new data arrives.

final chartData = ValueNotifier<List<FlSpot>>([]);

// In widget:
ValueListenableBuilder<List<FlSpot>>(
  valueListenable: chartData,
  builder: (_, spots, __) => LineChart(LineChartData(
    lineBarsData: [LineChartBarData(spots: spots)],
  )),
)

// When new point arrives:
void addDataPoint(double x, double y) {
  final current = [...chartData.value, FlSpot(x, y)];
  if (current.length > maxPoints) current.removeAt(0); // sliding window
  chartData.value = current;
}

Making Charts Accessible

Charts are invisible to VoiceOver/TalkBack without extra work. Minimum: wrap chart in a Semantics widget describing what it shows. For financial or medical apps, provide a toggleable table alternative. This meets WCAG 2.1 and App Store Review Guidelines (Section 5.1).

What's Included in Our Work

• Library selection justified by project requirements
• Implementation of required chart types (line, bar, pie, candlestick, etc.)
• Performance optimization (downsampling, rendering)
• Data entry animations
• Interactivity: zoom, pan, tooltip on touch
• Accessibility support
• Integration with real-time data sources

Timeline and Cost

One chart type with basic interactivity: 2–3 days. A set of 3–5 types with animations and real-time updates: 1–2 weeks. Cost is determined individually—contact us for a project estimate. Save up to 50% of development time through downsampling. Order a turnkey solution: get a consultation on library selection and optimization. Our engineers will help you save time and budget.

Mobile App Analytics: Firebase, Amplitude, AppsFlyer and Attribution

Our team regularly encounters projects where analytics is already "set up" but yields no real insights. A typical example is a startup with 50k DAU: tracking dozens of events without a single answer to the question "why don't users reach payment?". In two weeks we built a basic funnel and found that 70% of users drop off at the phone number verification screen. After fixing the bug, retention increased by 12%. The takeaway: analytics should start with specific questions, not tracking everything indiscriminately.

Why Event Taxonomy is the Foundation of Mobile App Analytics?

Firebase Analytics, Amplitude, Mixpanel — technically similar. The difference lies in what you put into them. A common mistake: events like screen_view, button_tap_1, button_tap_2 without context. A month later, no one remembers what button_tap_2 means.

Proper taxonomy: object + action + context. product_viewed, checkout_started, payment_completed with parameters product_id, category, price, source. This allows building funnels, cohort analysis, and retention without additional tracking.

We document the naming convention in a tracking plan — a document (Google Sheet or Amplitude Data Catalog) describing every event, its parameters, and triggering conditions. The tracking plan is synced with the analytics team before development begins, not after. This approach ensures that data remains interpretable months later and doesn't become a dump. Experience from 50+ projects confirms: without a tracking plan, analytics maintenance costs increase 2-3 times due to rework.

What Should You Choose for Mobile App Analytics: Firebase, Amplitude, or Mixpanel?

The table below highlights key differences between the three popular platforms. Choice depends on budget, traffic, and tasks.

Firebase Analytics — free, deep integration with Google Ads, BigQuery export for raw data. Limitations: data latency up to 24 hours, limited funnels. For startups with Google Ads traffic, it's the first choice.

Amplitude — product analytics focused on cohorts and user journeys. Journeys (formerly Pathfinder) shows actual paths between events — not assumed funnels but real routes. Session Replay records sessions for UX analysis. The free tier up to 10M events/month is enough for most products at launch.

Mixpanel — close to Amplitude, stronger in real-time segmentation. Insights, Funnels, Retention cover 90% of product analysts' tasks.

How to Solve Multi-Channel Attribution with AppsFlyer?

Knowing where a user came from is a separate task. Firebase Attribution works only within the Google ecosystem. For multi-channel attribution (Facebook Ads, TikTok, Apple Search Ads, programmatic), an MMP (Mobile Measurement Partner) is needed.

AppsFlyer is the market leader. OneLink — universal deep link working on iOS and Android, correctly attributing installs from any channel. Protect360 — built-in fraud protection (fake installs, click injection on Android). Adjust and Branch are competitors with similar features. Branch excels in deep linking; Adjust is popular in gaming.

According to Apple, with iOS 14.5, apps must obtain user permission via ATT before collecting IDFA for tracking. AppsFlyer uses probabilistic matching (IP + user agent + timing) for these users — accuracy is lower but better than nothing. SKAdNetwork and Privacy Preserving Attribution provide aggregated data from Apple with a 24-72 hour delay.

How to Set Up Crash Analytics to Not Miss Bugs?

Firebase Crashlytics is the standard for crash reporting. It automatically groups crashes by stack trace, shows affected users %, and sends velocity alerts when crash rate increases by more than 10% per hour.

Important: symbolication. On iOS, .dSYM files must be automatically uploaded with each build — via Fastlane upload_symbols_to_crashlytics or Xcode Cloud built-in. Without symbols, crashes in Crashlytics appear as memory addresses. This happens more often than expected when switching to a new CI — in one project with 500k users, we found that 40% of crashes remained unsymbolicated due to a missing CI/CD step. After automation, bug response time dropped from 3 hours to 15 minutes.

For React Native and Flutter, @sentry/react-native and sentry_flutter provide additional context: breadcrumbs, network requests before the crash, Redux/Provider state.

Below is a comparison of popular crash analytics tools to choose according to your needs.

Environment Setup

Three environments with separate Firebase projects: dev, staging, production. Mixing analytics from test sessions and production is a common mistake that skews all metrics. On iOS via GoogleService-Info.plist per scheme, on Android via google-services.json in each flavor folder.

Timelines: basic analytics with Firebase + Crashlytics — 3-5 days. Full tracking plan + Amplitude/Mixpanel with funnels and cohorts — 2-3 weeks. Attribution via AppsFlyer with deep linking and fraud protection — 1-2 weeks. Cost is calculated individually based on integration complexity.

What Is Included in Our Work

As part of analytics implementation, we provide:

• Development and approval of a tracking plan with product and marketing teams.
• SDK integration (Firebase, Amplitude, Mixpanel, AppsFlyer) considering your stack (Swift/Kotlin/Flutter/React Native).
• Setup of funnels, cohorts, dashboards, and alerts.
• Automation of symbolication and .dSYM upload via Fastlane.
• Documentation of events and parameters.
• Team training on the analytics platform.
• Two weeks of post-release support and tracking adjustments.

Our experience: 7 years of analytics implementation and over 80 successful projects in mobile development. We guarantee data correctness and transparency at every stage.

Contact us for a consultation on setting up analytics for your app. Request an audit of your current analytics — and we will show you which metrics you are losing.