| Tip |
|---|
You're reading an article from PHE's content knowledge base. For more articles visit our home page. |
Introduction
Tables in HTML publications can be made into bar charts by adding some markdown.
This makes bar charts, and other charts or graphs that can be adapted to this format, accessible.
You can toggle between the table and bar chart by pressing button 'change to table and accessible view' or 'change to chart view'.
Bar charts are created by building the table and adding bar chart in curly brackets, ie {barchart}.
Markdown must be flush against bottom of table, followed by space.
Different types of bar chart in markdown
A table and bar chart looks like this:
| Sector | Target Interviews | Achieved Interviews |
|----------------------------|-------------------|---------------------|
| Manufacturing | 1,000 | 962 |
| Wholesale and retail | 1,000 | 1,021 |
| Transportation and storage | 1,000 | 879 |
| Accommodation and food | 1,000 | 1,155 |
| Total | 4,000 | 4,017 |
{barchart}
We can stack the bar chart so all the data in each left hand label is in one row, with a total at the end. We can only use this type if the last column is a total of the other columns:
| Region | Number of accepted returns | No return/data excluded | Total |
|------|----------------------:|------------------------:|------:|
| London | 23 | 3 | 26 |
| Midlands and East | 28 | 13 | 41 |
| North | 22 | 21 | 43 |
| South | 30 | 6 | 36 |
{barchart stacked}
We can make the bar chart more compact if it's large and space is an issue:
| Region | Number of accepted returns | No return/data excluded | Total |
|------|----------------------:|------------------------:|------:|
| London | 23 | 3 | 26 |
| Midlands and East | 28 | 13 | 41 |
| North | 22 | 21 | 43 |
| South | 30 | 6 | 36 |
{barchart compact}
| Region | Number of accepted returns | No return/data excluded | Total |
|------|----------------------:|------------------------:|------:|
| London | 23 | 3 | 26 |
| Midlands and East | 28 | 13 | 41 |
| North | 22 | 21 | 43 |
| South | 30 | 6 | 36 |
{barchart compact stacked}
We can add negative values:
| Region | Value 1 | Value 2 | Value 3 |
|------|-----------:|----------:|------:|
| London | -5 | 3 | 26 |
| Midlands and East | -6 | 13 | 41 |
| North | -7 | 21 | 43 |
| South | -8 | 6 | 36 |
{barchart negative}
Appearance to users
Normal compact bar chart looks like this:
Stacked bar chart looks like this:
Corresponding table looks like this:
