Chart states
Use cases
Error state
The ErrorState subcomponent is responsible for handling errors in a graceful
manner, ultimately improving the overall user experience. Its primary function
is to catch any errors that may occur with the data and display a fallback UI
instead of crashing the entire application. The fallback UI occupies the full
width and height of the chart, ensuring that users are still provided with a
meaningful interface even in the presence of errors.
The ErrorState subcomponent offers a versatile feature that enables it to
handle both default and custom error messages. You can provide a custom message
through the ErrorState slot, which will then override the default error
message. This flexibility allows developers to tailor error messages to their
specific needs and requirements, ensuring a more personalized and informative
user experience.
The ErrorState subcomponent provides the flexibility to format custom error
messages using HTML, which allows for enhanced customization and adaptability in
presenting error information. Furthermore, it is possible to incorporate the
original thrown error within your custom error message, ensuring that users
receive comprehensive and relevant information when an error occurs.
EmptyState
The EmptyState subcomponent serves as a fallback when there is no data
available to display in a chart. Its purpose is to provide a user-friendly way
of informing the user about the current situation. When there is no data, a
fallback UI is displayed occupying the full width and height of the chart, along
with a default message.
A feature of EmptyState is its ability to handle custom messages. It provides
the flexibility to format custom messages using HTML, which allows for enhanced
customization and adaptability in presenting error information.
Loading
The loading prop is a boolean value that can be passed to a Chart component
to control its loading state. When the loading prop is set to true, the loading
indicator appears in the middle of the chart plot to inform the user that the
component is currently fetching or processing data. When the loading prop is set
to false, the component should display its regular content.