A perfect fit for stylish sites
Features
Charter stack can be used to illustrate the most simple dataset right through to advanced datasets using any of the available chart types.
If you need to get data-led information across to your website visitors then Charter stack is a must! Check out a brief summary of the features below.
Examples
This section contains examples of each of the different chart types available in Charter stack.
Many of the other (extensive) options have also been displayed. These include things like legend positioning, hiding gridlines, applying colour arrays, hiding axes and much more!!
Line Chart (with custom 'Points')
The above example includes 5 datasets (one for each region). The default style for the data points is a circle however in this example these have been changed for each dataset. In addition, we have opted to use these point styles in the Legend.
Note: You can 'filter' any of the charts on this page by clicking on the label of a dataset in the legend. Try it out!
Line Chart (with fill)
This example uses the same datasets as the first chart but has the option selected to 'fill'. This colours the area beneath the line. This can be done on a dataset by dataset level (though in this case it has been applied to all datasets). The default legend style has been used here (as opposed to using 'point styles' as the previous example did).
Other options for Line Charts include the ability to change the line 'tension' allowing you to go for straight lines or even more curved lines. There is also the option to have a 'stepped line'.
Bar Charts (Vertical and Horizontal)
The examples above both use the same (single) dataset. The first example is a vertical bar chart whereas the second one is a horizontal bar chart. As there is only one dataset used the legend has been removed. Only the stock axis has been given a label as the fruit axis is self-explanatory in this example.
In addition, because the categories (fruits in this example) suggest particular colours, a 'custom colour array' was used so that the relevant colours could be applied. Charter has numerous options for automatically colouring charts but in some cases it makes sense to specify particular colours.
Finally, with a single dataset it can be useful to remove the gridlines between categories. This has been done for the x-axis (in the first example) and the y-axis (in the second). Additionally, in the first example we have set the columns to be full width.
X-Axis label controls
You can now set a minimum angle that the x-axis label should be. In the example above this has been set to 90 which means that it is vertical. You can now also opt to force Charter to show all labels on the x-axis instead of auto-skipping some when space becomes lessened (mainly on mobile devices).
Bar Chart (Multiple datasets)
This example uses a vertical bar chart to compare 3 datasets. It has also added a colour background and adjusted font colours, tooltip colours and gridline colours to suit.
This chart has also been made a bit taller (on desktop) than default. This chart has been set to fill 70% of the browser height. Charter allows you to specify the height for mobile and desktop in either % of browser height or in pixels.
Average Temperature
Glasgow
Data Labels
Add data labels to your datasets!
The Bar and Line charts here have both had data labels included.
There are numerous positioning and styling options available. The bar chart demonstrates different positions / styles for each dataset.
Bar Chart (Stacked)
Population levels
1900 - 2050 (estimated)
This example uses the exact same dataset as the chart above. This time however the option to 'stack' the bars has been activated. This shows the cumulative total at each data point as opposed to the individual values of each dataset.
NB: Line charts can also be stacked in the same way!
Note also that a custom Heading has been added (using regular Header stack) and Charter's own title has been hidden. Both the Header stack and Charter stack have then been grouped in a container stack and a background colour added to it. This allows you more control over styling your titles.
Customised Tooltips
As opposed to simply listing the value of the single data point being hovered over (or tapped on mobile), v1.2 brings with it the option to customise the content of the tooltips.
This example lists all values from the same data point.
Some custom code has also been added to sum the values in the tooltip (this is an advanced function and requires users to add their own code to achieve whatever they like. Some code snippet examples are provided with the example project download).
The pie chart below also has customised tooltips to show the % of each segment.
Pie and Doughnut charts
Pie charts and Doughnut charts are effectively the same thing, it's just that a Doughnut chart has a hole in the middle. They are good for showing proportions of related items.
In these charts, the gridlines and axes have been removed as they are not required. In addition, the second chart includes a legend which can be used as a filter (resulting in the chart animating to show the remaining proportions).
Note: The second chart uses a random colour array (as opposed to the colours being specified). Unless the particular colours are important then randomly generated ones will generally suffice.
The Pie chart here also uses the new 'start angle' feature to specify where the segments should begin. The default is for the first segment to begin at the top (at the 12 o'clock position).
Half doughnut chart
You can even set your Doughnut (or Pie) chart to be cut in half. This is useful for displaying certain types of data.
This example illustrates progress made on a task.
Polar area chart
A Polar Area chart is similar to a Pie (and Doughnut) chart but instead of having different proportions, each section has the same angle but it is the depth that differs. It offers another interesting way to present data.
In this example the legend has been positioned to the left of the chart. The chart has also been made bigger (50% of the browser height on desktop and 60% on mobile. Note: In landscape mode on a mobile phone the chart will display at full height).
Radar chart
Radar charts are good at directly comparing and contrasting two (or more) datasets. In this example we have charted user feedback to illustrate which aspects of the product are strong and which may need some attention.
Mixed chart (Line and Bar)
A Mixed Chart allows you to combine bars and lines in a single chart. You can set each dataset to be either a line or a bar.
This example also demonstrates the use of a dashed line. This option is available for any dataset that uses a line.
Get Charter
You can get this stack on its own or as part of our hugely discounted stacks bundle.
Our stacks bundle includes Charter and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:
Popular
Charter
Charter lets you easily create beautiful charts to present your data in the best possible way
Over 60% off!
Stacks bundle
Get ALL of our stacks in one incredible bundle deal!
October Special
STH_Oct23 during checkout!
FAQs
Below are some of the most common questions about this and our other stacks.
Stack FAQs
General FAQs
Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.
All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.
We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.
