{"id":20439,"date":"2026-04-09T00:59:00","date_gmt":"2026-04-09T00:59:00","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=20439"},"modified":"2026-04-10T09:55:15","modified_gmt":"2026-04-10T09:55:15","slug":"javascript-vertical-area-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2026\/04\/09\/javascript-vertical-area-chart\/","title":{"rendered":"How to Create a JavaScript Vertical Area Chart"},"content":{"rendered":"

\"JavaScript<\/a>Traditionally, charts that visualize data over time<\/a> are horizontal. But sometimes a vertical layout is a better fit. In this tutorial, you will learn how to create an interactive vertical area chart using JavaScript step by step.<\/p>\n

The practical example uses monthly approval and disapproval ratings of American presidents from 1941 to 2025, according to Gallup polls. The final chart shows over 80 years of public support and opposition across U.S. administrations as two mirrored area series running top to bottom.<\/p>\n

<\/p>\n

The result will look like this:<\/p>\n

\"Preview<\/a><\/p>\n

What Is a Vertical Area Chart?<\/h2>\n

A vertical area chart is a type of data visualization<\/a> that rotates a standard area chart<\/a> 90 degrees. The time or category axis runs vertically, and the value axis runs horizontally. The filled area between the series line and the baseline still communicates magnitude and change \u2014 the orientation just shifts so that time flows top to bottom instead of left to right.<\/p>\n

This layout works well in a few specific situations: when the timeline is long and a horizontal chart would compress the data too much, when category labels are long and hard to fit on a horizontal axis, or when the chart is embedded in a vertically scrolling page and a wide horizontal layout would interrupt the reading flow. It is also a natural choice when the main story is the balance between two opposing series.<\/p>\n

How to Build a JavaScript Vertical Area Chart<\/h2>\n

Building an interactive vertical area chart with JavaScript involves four steps: creating the HTML page, loading the library, preparing the data, and writing the visualization code.<\/p>\n

1. Create an HTML Page<\/h3>\n

Start with a minimal HTML file containing a <div><\/code> element that will hold the chart. The #container<\/code> div is set to fill the full browser window here, but you can replace the percentage values with fixed pixel dimensions if the chart should occupy only part of a page.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>JavaScript Vertical Area Chart<\/title>\n  <style>\n    \/* make the page and container fill the full browser window *\/\n    html, body, #container {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n    }\n  <\/style>\n<\/head>\n<body>\n  <!-- the chart will render inside this div -->\n  <div id=\"container\"><\/div>\n<\/body>\n<\/html><\/code><\/pre>\n
Now that the HTML page is in place, let’s add the charting library.<\/p>\n
2. Include the JavaScript Files<\/h3>\n
In this tutorial, we will be using the AnyChart JavaScript charting library<\/a>. The vertical area chart type is available in its anychart-base.min.js<\/code> module. Load it from the AnyChart CDN by adding a <script><\/code> tag in the <head><\/code> section, then add an empty <script><\/code> block in the <body><\/code> where the chart code will go.<\/p>\n
<head>\n  ...\n  <!-- load the AnyChart base module, which includes vertical area charts -->\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.14.1\/js\/anychart-base.min.js\"><\/script>\n<\/head>\n<body>\n  <div id=\"container\"><\/div>\n  <!-- chart code goes here -->\n  <script>\n  <\/script>\n<\/body><\/code><\/pre>\n
With the library loaded, the next step is to prepare the data.<\/p>\n
3. Prepare the Data<\/h3>\n
The chart uses U.S. presidential job approval data from the American Presidency Project at UC Santa Barbara<\/a>, based on Gallup polling results covering 16 presidents from Franklin D. Roosevelt to Donald Trump’s second term. Monthly averages of approval and disapproval percentages were computed across all available polls for each month.<\/p>\n
The dataset contains 910 monthly data points. Each row holds a month label, the average approval percentage, and the average disapproval percentage stored as a negative number. Storing disapproval as negative creates the mirrored effect around the zero baseline \u2014 the technique that gives this chart its distinctive shape. Here is a sample of the data:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Month<\/th>\nApproval (%)<\/th>\nDisapproval (stored as negative %)<\/th>\n<\/tr>\n<\/thead>\n
Jul 1941<\/td>\n67<\/td>\n-24<\/td>\n<\/tr>\n
Jan 1953<\/td>\n68<\/td>\n-8<\/td>\n<\/tr>\n
Jan 1961<\/td>\n72<\/td>\n-6<\/td>\n<\/tr>\n
Oct 2001<\/td>\n88<\/td>\n-9<\/td>\n<\/tr>\n
Jul 1974<\/td>\n24<\/td>\n-63<\/td>\n<\/tr>\n
Jan 2009<\/td>\n56<\/td>\n-31<\/td>\n<\/tr>\n
Jan 2021<\/td>\n46<\/td>\n-50<\/td>\n<\/tr>\n
Dec 2025<\/td>\n36<\/td>\n-59<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 
\nEach row is a three-element array: the month label string, the approval value, and the disapproval value, and it looks like this in the code:<\/p>\n
\/\/ each entry: [month label, approval %, disapproval as negative %]\n\/\/ the full dataset has 910 rows; the complete version is in the Playground link below\nconst rawData = [\n  [\"Jul 1941\", 67, -24],\n  [\"Aug 1941\", 67, -24],\n  [\"Sep 1941\", 70, -24],\n  \/\/ ... 907 more monthly entries ...\n  [\"Dec 2025\", 36, -59]\n];<\/code><\/pre>\n
4. Write the JS Code for the Chart<\/h3>\n
All the JavaScript goes inside an anychart.onDocumentReady()<\/code> wrapper \u2014 a function that AnyChart calls as soon as the page has fully loaded. This guarantees that the chart container <div><\/code> exists in the DOM before the chart tries to render into it.<\/p>\n
anychart.onDocumentReady(function () {\n\n  \/\/ all chart code goes here\n\n});<\/code><\/pre>\n
Add the Data<\/h4>\n
The <\/span>rawData<\/span> array from Step 3 is the first thing to place inside anychart.onDocumentReady()<\/code><\/span>.<\/p>\n
The time axis will use a date\/time scale<\/a>, which requires JavaScript Date<\/code> objects rather than strings like \"Jul 1941\"<\/code>. Each row is therefore needs to be converted before passing it into the chart.<\/p>\n
MONTH_IDX<\/code> is a small lookup object that maps three-letter month abbreviations to their zero-based index \u2014 January = 0, December = 11 \u2014 matching the Date<\/code> constructor.<\/p>\n
\/\/ map month abbreviations to their zero-based JS Date index\nconst MONTH_IDX = {\n  Jan:0, Feb:1, Mar:2, Apr:3, May:4,  Jun:5,\n  Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11\n};\n\n\/\/ convert each \"MMM YYYY\" string to a Date object, keep the approval and disapproval values\nconst data = rawData.map(function(row) {\n  const parts = row[0].split(\" \");\n  return [new Date(parseInt(parts[1]), MONTH_IDX[parts[0]], 1), row[1], row[2]];\n});<\/code><\/pre>\n
Create a Data Set and Map the Two Series<\/h4>\n
AnyChart uses a data set<\/a> as a single source that can feed multiple series at once. We load all 910 rows into one with anychart.data.set()<\/code>, then create two mappings from it. approvalMap<\/code> reads column 1 as the series value; disapprovalMap<\/code> reads column 2. Both share column 0 \u2014 the Date<\/code> object \u2014 as their x<\/code> position.<\/p>\n
\/\/ load the data into an AnyChart data set\nconst ds = anychart.data.set(data);\n\n\/\/ map approval (column 1) and disapproval (column 2) as separate series\n\/\/ both share column 0 (the Date object) as their x position\nconst approvalMap    = ds.mapAs({x: 0, value: 1});\nconst disapprovalMap = ds.mapAs({x: 0, value: 2});<\/code><\/pre>\n
Create the Chart<\/h4>\n
One call creates the chart. anychart.verticalArea()<\/code> returns a vertical area chart instance \u2014 a standard area chart rotated 90 degrees, with the time axis running vertically and the value axis running horizontally. Everything else \u2014 series, scales, visual settings \u2014 attaches to this object.<\/p>\n
\/\/ create the vertical area chart\nconst chart = anychart.verticalArea();<\/code><\/pre>\n
Add the Two Area Series<\/h4>\n
Each series gets its own chart.area()<\/code> call, bound to one of the data mappings created above. In addition, connectMissingPoints(true)<\/code> keeps the line continuous across months where no poll was conducted \u2014 without it, the chart would show gaps in the data.<\/p>\n
\/\/ approval series: positive values extend to the right of the zero line\nconst approvalSeries = chart.area(approvalMap);\napprovalSeries.name(\"Approval\");\napprovalSeries.connectMissingPoints(true); \/\/ bridge months with no poll data\n\n\/\/ disapproval series: negative values extend to the left of the zero line\nconst disapprovalSeries = chart.area(disapprovalMap);\ndisapprovalSeries.name(\"Disapproval\");\ndisapprovalSeries.connectMissingPoints(true);<\/code><\/pre>\n
Configure the Scales<\/h4>\n
The chart has two scales<\/a> to configure: the x-scale for the vertical time axis and the y-scale for the horizontal value axis.<\/p>\n
The default x-scale places ticks at data-point positions, which is not useful here. We replace it with a date\/time scale that puts one tick at the start of every calendar year. inverted(true)<\/code> flips the direction: 1941 at the top, 2025 at the bottom \u2014 the natural reading order for a historical timeline.<\/p>\n
\/\/ replace the default scale with a datetime scale for proper yearly tick marks\nconst xScale = anychart.scales.dateTime();\nxScale.ticks().interval(\"year\", 1); \/\/ one tick at the start of every calendar year\nxScale.inverted(true);              \/\/ 1941 at top, 2025 at bottom\nchart.xScale(xScale);<\/code><\/pre>\n
For the y-scale, we fix the range at \u2212100 to 100. This keeps both sides symmetrical and prevents clipping even the most extreme values in the dataset.<\/p>\n
\/\/ set the horizontal value axis to run symmetrically from -100 to 100\nchart.yScale().minimum(-100);\nchart.yScale().maximum(100);<\/code><\/pre>\n
Final Steps<\/h4>\n
A few more calls finish the setup before rendering.<\/p>\n
First, chart.title()<\/code> sets a descriptive title<\/a> above the chart.<\/p>\n
\/\/ add a descriptive title above the chart\nchart.title(\"U.S. Presidential Approval Ratings (1941\u20132025)\");<\/code><\/pre>\n
Second, chart.legend(true)<\/code> enables the legend<\/a> so the viewer knows which color is approval and which is disapproval.<\/p>\n
\/\/ show the series legend\nchart.legend(true);<\/code><\/pre>\n
Finally, chart.container()<\/code> names the <div><\/code> the chart should render into, and chart.draw()<\/code> triggers the render because nothing appears on the page until this call runs.<\/p>\n
\/\/ point the chart at the container div and render it\nchart.container(\"container\");\nchart.draw();<\/code><\/pre>\n
Full Code and Result<\/h3>\n
Here is the complete, runnable HTML code with all the pieces assembled. The data array is abbreviated below \u2014 the full 910-row dataset is available in the Playground link below.<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>JavaScript Vertical Area Chart<\/title>\n  <style>\n    html, body, #container {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n    }\n  <\/style>\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.14.1\/js\/anychart-base.min.js\"><\/script>\n<\/head>\n<body>\n  <div id=\"container\"><\/div>\n  <script>\n    anychart.onDocumentReady(function () {\n      \/\/ monthly approval\/disapproval data, 1941\u20132025\n      \/\/ source: American Presidency Project, UC Santa Barbara\n      const rawData = [\n        [\"Jul 1941\", 67, -24],\n        \/\/ ... full dataset in the Playground link below\n        [\"Dec 2025\", 36, -59]\n      ];\n      \/\/ convert \"MMM YYYY\" labels to Date objects for the datetime scale\n      const MONTH_IDX = {\n        Jan:0, Feb:1, Mar:2, Apr:3, May:4,  Jun:5,\n        Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11\n      };\n      const data = rawData.map(function(row) {\n        const parts = row[0].split(\" \");\n        return [new Date(parseInt(parts[1]), MONTH_IDX[parts[0]], 1), row[1], row[2]];\n      });\n      \/\/ load into a data set and create two series mappings\n      const ds = anychart.data.set(data);\n      const approvalMap    = ds.mapAs({x: 0, value: 1});\n      const disapprovalMap = ds.mapAs({x: 0, value: 2});\n      \/\/ create a vertical area chart\n      const chart = anychart.verticalArea();\n      \/\/ approval and disapproval area series\n      const approvalSeries = chart.area(approvalMap);\n      approvalSeries.name(\"Approval\");\n      approvalSeries.connectMissingPoints(true);\n      const disapprovalSeries = chart.area(disapprovalMap);\n      disapprovalSeries.name(\"Disapproval\");\n      disapprovalSeries.connectMissingPoints(true);\n      \/\/ datetime x-scale: yearly ticks, oldest at top\n      const xScale = anychart.scales.dateTime();\n      xScale.ticks().interval(\"year\", 1);\n      xScale.inverted(true);\n      chart.xScale(xScale);\n      \/\/ y-scale: symmetrical range around zero\n      chart.yScale().minimum(-100);\n      chart.yScale().maximum(100);\n      \/\/ title, legend, and render\n      chart.title(\"U.S. Presidential Approval Ratings (1941\u20132025)\");\n      chart.legend(true);\n      chart.container(\"container\");\n      chart.draw();\n    });\n  <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
That’s it! A basic JavaScript vertical area chart is ready, showing U.S. presidential approval and disapproval ratings since 1941 according to Gallup. Take a look at it below or open it on AnyChart Playground<\/a>.<\/p>\n