Tips : If you want to show the data is loading on a chart on a mockup, you can find this skeleton in the skeleton tab of the UI kit.
If we dig into the structure of one chart, the chart zone is structured most of the time with two lines, the X and a Y axis. These are legended by a label and the unit of measure. We use dotted light rulers or/and columns to facilitate legibility of the chart.
From the big picture to details
If we want to reveal the objective big picture, the data we display should be evolutive and maniable. Our users should be able to zoom in and out, and to navigate inside the graph.
In this example, we decreased the cognitive workload, by highlighting only the hovered line.
Indeed, sometimes there is too much information : we can’t show everything on a 4-columns graph. This is why the graphs can be adapted to 6, 8 or 12 columns if needed with modularity. The X-axis can also be interactive, allowing the user to explore through time.