4.2 Chart Styling Xmpro Ui Design Basics
To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.
Need help with creating your XMPRO apps? Send an email to support@xmpro.com
Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.
Transcript
in this lesson
i'm going to share some best practices
and useful tools
to help you style your charts for the
best user experience
let's look at chart text so when adding
a chart to your interface it's important
to use chart text
to give your users more context about
the data that they're looking at
you do this by adding descriptive
headings labeling both your x
and y axes adding labels to your data
and using legends now while this seems
like an extra tedious step when you're
creating your charts
it might mean the difference between a
user understanding the data
or not so in my view that makes it worth
it
when adding text to your chart you also
want to use bold sparingly
to emphasize key elements
and remember from the color palette
video where we discussed using
patterns to help users with restricted
vision differentiate between series
so how do you actually choose colors for
your charts well
i recommend another handy tool from the
team at learnui.design
it's called the data visualization color
palette generator
now depending on the data that you have
and what it is that you want to show
you're either going to generate a
palette that is
a series of colors that are visually
equidistant
like we had in our examples or you're
going to do variations of a single hue
or divergent colors
so as i mentioned visually equidistant
means
colors that are equally different to
your eyes
or colors that are easily
distinguishable from one another
think red and blue yellow and green
purple and orange this is ideal when
you're trying to do things like pie
charts or
grouped bar charts or multi-line charts
to use the palette generator choose how
many colors you want to generate
select whether you want to use a light
or a dark background
and then you can also add in colors on
both ends of the scale
if there's a specific primary color that
you would like to include
now let's look at the single hue scale
so this is useful
when you want visualizations where you
represent a single variable
but you show a darker variation as the
higher value
and a lighter variation as the lower
value
and finally we have a divergent scale so
think of creating a map of the usa with
republican and democratic voters by
state
on one end of the spectrum it's going to
be blue
and the other end of the spectrum is
going to be red and the palette
generator will create a range of colors
between those two
to show how the data transitions from
one extreme
through a neutral middle and then to an
opposite extreme
so by using the data color picker tool
you'll be able to generate color
palettes that work for a variety of data
types
congratulations on completing this ui
design basics course from xm pro
it's been such a pleasure to share tips
and best practices with you
to help you design apps that wow your
team and your users
now i would really love to get your
feedback on this course so that we can
keep on improving it
please click the link below to complete
the survey on your experience of the
course
and tell us what you think where we fall
short how we can improve going forward
i appreciate you taking the time to
watch all of the videos and i look
forward to your questions
Last updated