High-Performance UI Component Library for Enterprise Applications Forums Charts & Data Viz How do I use Smart Chart with large datasets efficiently?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #113654
    alex.morris22
    Participant

    Hi everyone, I am working on an internal admin dashboard with Charts. I am currently trying to solve this: How do I use Smart Chart with large datasets efficiently? So far, I already checked the docs and basic examples, but some edge cases break expected behavior. Is there an official pattern for this scenario?

    #113655
    admin
    Keymaster

    Hi,

    The recommended approach for large datasets is to take advantage of its performance features rather than treating dataSource as an unlimited client-side array. HTMLElements specifically documents UI virtualization and server-side loading as the approach for large datasets, allowing thousands of points to be handled without rendering everything at once.

    The practical pattern is:

    Keep the dataset on the server and load only the data needed for the current view/range.
    Use aggregation/downsampling server-side when you have millions of raw records. For example, return hourly/daily aggregates rather than every individual event.
    Use Smart.Chart’s zoom/range navigation so the user can progressively inspect a smaller portion of the dataset.
    Avoid repeatedly replacing a huge dataSource during filtering; update the data in appropriately sized chunks and call refresh() when needed.
    Prefer Canvas rendering for very large visualizations where appropriate; Smart.Chart supports both SVG and HTML5 Canvas rendering.
    Be careful with expensive features such as animations, labels, and tooltips across thousands of points. Disable or limit them when they aren’t essential.

    So, for an admin dashboard, the architecture I’d use is:

    database → server-side filtering/aggregation → paged/viewport-sized data → Smart.Chart → zoom/drill into finer-grained data

    If your current edge case is specifically 100k+/1M+ points in dataSource, the important distinction is whether you’re trying to render all those points or merely query them. Smart.Chart’s large-data story is much better when the browser only receives the data required for the current viewport rather than the complete raw dataset

    Best regards,
    Markov

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.