DEV Community: andreykh

A Metric Dropped. What Charts Help Find the Root Cause?

andreykh — Wed, 23 Sep 2026 06:45:03 +0000

Root cause analysis leans on a different set of charts than reporting does. Seven do most of the work, and each one answers a single diagnostic question: which segment owns the drop, which few causes matter, what moved the number, where the volume leaks. None of them is a reporting chart.

That distinction is the whole problem. Most dashboards are built to report, and they are good at it. Revenue is down eight percent. Resolution time went from six hours to eleven. There it is, in red, updated hourly. Then someone asks why, and the dashboard has nothing left to say. The next twenty minutes go into filtered exports and a pivot table, and the answer that eventually turns up is one person's hunch with a number attached.

Read each one below by the question it answers. That is what decides which you reach for, not the shape of your data.

Shortlist: Which Chart Answers Which Question

Chart Type	Question
Decomposition tree	Which part of the number is dragging it down?
Pareto chart	Of all the causes, which few actually matter?
Waterfall chart	What moved the number from then to now?
Heatmap chart	Which combination of two things is the problem?
Box plot	What is the average hiding?
Scatter plot	Do these two things really move together?
Sankey diagram	Where does the volume go, and where does it leak?

Seven Charts, Seven Questions

Decomposition Tree: Which part of the number is dragging it down?

A decomposition tree breaks a measure down level by level, across as many dimensions as you need, with each split chosen as you go.

Reach for it when a KPI is off and you don't yet know which segment owns it. It is usually the first move, because it narrows the search space before you have committed to a theory.

Watch out: The biggest branch feels like the answer. It's only where to start looking. A branch can be large simply because that segment is large.

Cousins: Treemap and Sunburst show the same breakdown, but on a fixed hierarchy with no live drill. Power BI ships a decomposition tree natively; in Qlik Sense it arrives as an extension.

Pareto Chart: Of all the causes, which few actually matter?

A Pareto chart ranks categories largest to smallest, with a cumulative line across them.

Best when a long tail of small causes is hiding a short head of big ones. The cumulative line is doing the real work: it tells you where to stop reading.

Watch out: 80/20 is a pattern, not a law. Don't stop at the tallest bar; the 2nd and 3rd are often the ones you can move. The largest cause is frequently the one nobody has authority over.

Cousins: A sorted column chart is its base; the cumulative line makes it a Pareto.

Waterfall Chart: What moved the number from then to now?

A waterfall chart shows the step-by-step ups and downs bridging a start value to an end value.

This is the chart for explaining a change: budget vs. actual, last period vs. this one. It is the only one here that reconstructs a number rather than dissecting it.

Watch out: Only honest for additive parts. If factors overlap or interact, the bridge misleads. Price and volume effects are the classic trap, since a change in one moves the other.

Cousins: None. It's the purpose-built variance chart.

Heatmap Chart: Which combination of two things is the problem?

A heatmap chart puts one dimension down the rows, another across the columns, with each cell colored by the measure.

Best for finding the exact cell: product × region, day × hour, channel × segment. A decomposition tree tells you the region is down; a heatmap tells you it is that region on weekends.

Watch out: Too many rows or columns and it's just noise. Sort both axes by value, never alphabetically. Alphabetical order scatters the pattern that sorting would have made obvious in one glance.

Cousins: A pivot table is the un-encoded version; color is what surfaces the pattern.

Box Plot: What is the average hiding?

A box plot shows the median, quartiles, and outliers for each group on one scale.

Use it for groups where the spread or the outliers, not the mean, are the story. It is the fastest way to find out that a metric did not get worse across the board.

Watch out: It can hide a two-peak distribution: it reads as one wide box. When shape matters, use a histogram.

Cousins: A histogram and a distribution plot show the full shape of a single distribution.

Scatter Plot: Do these two things really move together?

A pattern this clean still does not tell you why.

A scatter plot, or dot chart, puts two measures on X and Y, one dot per record.

The job here is pressure-testing a suspected driver before you trust it. By this point in an investigation you usually have a theory, and this is the chart that tries to break it.

Watch out: Correlation is never causation. A tight cloud is a lead, not proof; watch for a hidden third variable. This is the single most common way a root cause analysis produces a confident wrong answer.

Cousins: A bubble chart adds a third variable as size; a scatter matrix shows many pairs at once.

Sankey Diagram: Where does the volume go, and where does it leak?

A Sankey diagram draws flows between stages, with link width sized to volume.

Best for following a path end to end: traffic → conversion, intake → resolution. Where the other six examine a number, this one examines a route.

Watch out: Too many nodes and it turns to spaghetti. Best with a clear direction and a few stages.

Cousins: A funnel chart is the linear, single-path case for step-by-step drop-off.

How They Chain: A Worked Example

A shortlist makes these look like seven options to pick between. In practice, you use three or four in sequence, and each one narrows what the next has to explain.

Take a support team whose average ticket resolution time has gone from six hours to eleven over a quarter. The dashboard reports the eleven. Nothing on it says why.

The same investigation as a map: three charts, and what each one rules out.

Start with the decomposition tree. Split resolution time by channel, then by region, then by ticket type. Suppose the split comes back nearly even: every branch is up, no single segment owns it. That is a useful answer, and it is one most investigations never get, because they stop at the first branch that looks large and start building a story around it. An even split rules out a segment-specific cause in the dimensions you checked and sends you to a different question.

Then the box plot. Group the tickets by month and look at the spread instead of the mean. Suppose the median has barely moved, from five hours to five and a half, while the upper whisker has stretched from twelve hours to forty. Now the picture is different. Most tickets are being handled at roughly the old speed. A small number are taking dramatically longer, and they are dragging the average with them. The eleven-hour figure on the dashboard describes almost none of the actual tickets.

This is why the box plot earns its place. The mean was never wrong, it was just answering a question nobody asked.

Then the Pareto. Take only the slow tail and rank it by category. If two categories account for most of the added hours, the investigation has a target. If the added hours are spread evenly across fifteen categories, it has a process problem rather than a category problem, and the next question is about routing rather than about content.

Three charts, three narrowing steps, and at no point did anyone need a hunch. The chain also shows why the order matters: running the Pareto first would have ranked all tickets and buried the slow tail inside the volume of normal ones.

What Is Not Here

You won't find gauges or bullet charts.

They monitor a number. Neither of them helps you find a cause. A gauge can tell you resolution time is in the red band. It cannot tell you that the red is coming from forty tickets out of nine hundred.

That is not a criticism of those charts. They are built for a different job: telling you whether a number is where it should be. The mistake is reaching for a monitoring chart when the question has moved from what to why.

Two charts on this list are worth naming for what they cannot do. A scatter plot shows correlation and never causation, no matter how tight the cloud. And a waterfall is only honest when the factors it bridges are genuinely additive. Both produce confident, well-formatted, wrong answers when used past their limits, which makes them more dangerous than a chart that simply looks bad.

What to Do With This

If you build dashboards, the practical takeaway is smaller than a redesign. Pick the one metric people most often ask "but why" about, and add the chart that answers the second question.

Reporting the number and diagnosing it are two different jobs, and most dashboards have only ever been asked to do the first.

These seven answer why a number moved. Whether it is where it should be is a different job, one that performance vs. target charts are built for.

Creating a Vertical Area Chart with JavaScript: 80+ Years of U.S. Presidential Approval Data

andreykh — Wed, 15 Apr 2026 19:12:50 +0000

Traditionally, charts that visualize data over time 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.

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.

The result will look like this:

What Is a Vertical Area Chart?

A vertical area chart is a type of data visualization that rotates a standard area chart 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 — the orientation just shifts so that time flows top to bottom instead of left to right.

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.

How to Build a JavaScript Vertical Area Chart

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.

1. Create an HTML Page

Start with a minimal HTML file containing a <div> element that will hold the chart. The #container 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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Vertical Area Chart</title>
  <style>
    /* make the page and container fill the full browser window */
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <!-- the chart will render inside this div -->
  <div id="container"></div>
</body>
</html>

Now that the HTML page is in place, let's add the charting library.

2. Include the JavaScript Files

In this tutorial, we will be using the AnyChart JavaScript charting library. The vertical area chart type is available in its anychart-base.min.js module. Load it from the AnyChart CDN by adding a <script> tag in the <head> section, then add an empty <script> block in the <body> where the chart code will go.

<head>
  ...
  <!-- load the AnyChart base module, which includes vertical area charts -->
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-base.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <!-- chart code goes here -->
  <script>
  </script>
</body>

With the library loaded, the next step is to prepare the data.

3. Prepare the Data

The chart uses U.S. presidential job approval data from the American Presidency Project at UC Santa Barbara, 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.

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 — the technique that gives this chart its distinctive shape. Here is a sample of the data:

Month	Approval (%)	Disapproval (stored as negative %)
Jul 1941	67	-24
Jan 1953	68	-8
Jan 1961	72	-6
Oct 2001	88	-9
Jul 1974	24	-63
Jan 2009	56	-31
Jan 2021	46	-50
Dec 2025	36	-59

Each 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:

// each entry: [month label, approval %, disapproval as negative %]
// the full dataset has 910 rows; the complete version is in the Playground link below
const rawData = [
  ["Jul 1941", 67, -24],
  ["Aug 1941", 67, -24],
  ["Sep 1941", 70, -24],
  // ... 907 more monthly entries ...
  ["Dec 2025", 36, -59]
];

4. Write the JS Code for the Chart

All the JavaScript goes inside an anychart.onDocumentReady() wrapper — a function that AnyChart calls as soon as the page has fully loaded. This guarantees that the chart container <div> exists in the DOM before the chart tries to render into it.

anychart.onDocumentReady(function () {

  // all chart code goes here

});

Add the Data

The rawData array from Step 3 is the first thing to place inside anychart.onDocumentReady().

The time axis will use a date/time scale, which requires JavaScript Date objects rather than strings like "Jul 1941". Each row is therefore needs to be converted before passing it into the chart.

MONTH_IDX is a small lookup object that maps three-letter month abbreviations to their zero-based index — January = 0, December = 11 — matching the Date constructor.

// map month abbreviations to their zero-based JS Date index
const MONTH_IDX = {
  Jan:0, Feb:1, Mar:2, Apr:3, May:4,  Jun:5,
  Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11
};

// convert each "MMM YYYY" string to a Date object, keep the approval and disapproval values
const data = rawData.map(function(row) {
  const parts = row[0].split(" ");
  return [new Date(parseInt(parts[1]), MONTH_IDX[parts[0]], 1), row[1], row[2]];
});

Create a Data Set and Map the Two Series

AnyChart uses a data set as a single source that can feed multiple series at once. We load all 910 rows into one with anychart.data.set(), then create two mappings from it. approvalMap reads column 1 as the series value; disapprovalMap reads column 2. Both share column 0 — the Date object — as their x position.

// load the data into an AnyChart data set
const ds = anychart.data.set(data);

// map approval (column 1) and disapproval (column 2) as separate series
// both share column 0 (the Date object) as their x position
const approvalMap    = ds.mapAs({x: 0, value: 1});
const disapprovalMap = ds.mapAs({x: 0, value: 2});

Create the Chart

One call creates the chart. anychart.verticalArea() returns a vertical area chart instance — a standard area chart rotated 90 degrees, with the time axis running vertically and the value axis running horizontally. Everything else — series, scales, visual settings — attaches to this object.

// create the vertical area chart
const chart = anychart.verticalArea();

Add the Two Area Series

Each series gets its own chart.area() call, bound to one of the data mappings created above. In addition, connectMissingPoints(true) keeps the line continuous across months where no poll was conducted — without it, the chart would show gaps in the data.

// approval series: positive values extend to the right of the zero line
const approvalSeries = chart.area(approvalMap);
approvalSeries.name("Approval");
approvalSeries.connectMissingPoints(true); // bridge months with no poll data

// disapproval series: negative values extend to the left of the zero line
const disapprovalSeries = chart.area(disapprovalMap);
disapprovalSeries.name("Disapproval");
disapprovalSeries.connectMissingPoints(true);

Configure the Scales

The chart has two scales to configure: the x-scale for the vertical time axis and the y-scale for the horizontal value axis.

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) flips the direction: 1941 at the top, 2025 at the bottom — the natural reading order for a historical timeline.

// replace the default scale with a datetime scale for proper yearly tick marks
const xScale = anychart.scales.dateTime();
xScale.ticks().interval("year", 1); // one tick at the start of every calendar year
xScale.inverted(true);              // 1941 at top, 2025 at bottom
chart.xScale(xScale);

For the y-scale, we fix the range at −100 to 100. This keeps both sides symmetrical and prevents clipping even the most extreme values in the dataset.

// set the horizontal value axis to run symmetrically from -100 to 100
chart.yScale().minimum(-100);
chart.yScale().maximum(100);

Final Steps

A few more calls finish the setup before rendering.

First, chart.title() sets a descriptive title above the chart.

// add a descriptive title above the chart
chart.title("U.S. Presidential Approval Ratings (1941–2025)");

Second, chart.legend(true) enables the legend so the viewer knows which color is approval and which is disapproval.

// show the series legend
chart.legend(true);

Finally, chart.container() names the <div> the chart should render into, and chart.draw() triggers the render because nothing appears on the page until this call runs.

// point the chart at the container div and render it
chart.container("container");
chart.draw();

Full Code and Result

Here is the complete, runnable HTML code with all the pieces assembled. The data array is abbreviated below — the full 910-row dataset is available in the Playground link below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Vertical Area Chart</title>
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.14.1/js/anychart-base.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    anychart.onDocumentReady(function () {
      // monthly approval/disapproval data, 1941–2025
      // source: American Presidency Project, UC Santa Barbara
      const rawData = [
        ["Jul 1941", 67, -24],
        // ... full dataset in the Playground link below
        ["Dec 2025", 36, -59]
      ];
      // convert "MMM YYYY" labels to Date objects for the datetime scale
      const MONTH_IDX = {
        Jan:0, Feb:1, Mar:2, Apr:3, May:4,  Jun:5,
        Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11
      };
      const data = rawData.map(function(row) {
        const parts = row[0].split(" ");
        return [new Date(parseInt(parts[1]), MONTH_IDX[parts[0]], 1), row[1], row[2]];
      });
      // load into a data set and create two series mappings
      const ds = anychart.data.set(data);
      const approvalMap    = ds.mapAs({x: 0, value: 1});
      const disapprovalMap = ds.mapAs({x: 0, value: 2});
      // create a vertical area chart
      const chart = anychart.verticalArea();
      // approval and disapproval area series
      const approvalSeries = chart.area(approvalMap);
      approvalSeries.name("Approval");
      approvalSeries.connectMissingPoints(true);
      const disapprovalSeries = chart.area(disapprovalMap);
      disapprovalSeries.name("Disapproval");
      disapprovalSeries.connectMissingPoints(true);
      // datetime x-scale: yearly ticks, oldest at top
      const xScale = anychart.scales.dateTime();
      xScale.ticks().interval("year", 1);
      xScale.inverted(true);
      chart.xScale(xScale);
      // y-scale: symmetrical range around zero
      chart.yScale().minimum(-100);
      chart.yScale().maximum(100);
      // title, legend, and render
      chart.title("U.S. Presidential Approval Ratings (1941–2025)");
      chart.legend(true);
      chart.container("container");
      chart.draw();
    });
  </script>
</body>
</html>

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.

How to Customize a JavaScript Vertical Area Chart

Now let's make some changes to the chart's design and behavior. The five customizations below improve readability and add contextual information to the vertical area chart built in the previous part of the tutorial.

A. Smooth the Curves with Spline Area

The plain area() series connects data points with straight line segments, producing a jagged silhouette. Switching to splineArea() fits a smooth curve through the same points. Over 910 monthly values, the smoothed version reveals the broad trends without visual noise from minor month-to-month fluctuations.

Replace chart.area() with chart.splineArea() for both series:

// splineArea draws smooth interpolated curves instead of angular segments
const approvalSeries    = chart.splineArea(approvalMap);
const disapprovalSeries = chart.splineArea(disapprovalMap);

B. Set Series Colors

Green and red carry an intuitive meaning for approval and disapproval data. Use the fill() method to set the area color and opacity, and stroke() to set the outline color and thickness.

// green fill and outline for the approval series
approvalSeries.normal().fill("#27ae60", 0.5);
approvalSeries.normal().stroke("#27ae60", 1.5);

// red fill and outline for the disapproval series
disapprovalSeries.normal().fill("#e74c3c", 0.5);
disapprovalSeries.normal().stroke("#e74c3c", 1.5);

C. Format the Value Axis

Disapproval values are stored as negative numbers, so the horizontal axis would normally label the left side "-75", "-50", and so on. Displaying both sides as absolute values — "75%", "50%" — makes the chart symmetrical and easier to read. The Math.abs() function in the label format() callback handles the conversion. While here, grid lines at every 25 percentage points and an explanatory axis title add further clarity.

// display absolute values with % sign on both sides of the axis
chart.yAxis().labels().format(function() {
  return Math.abs(this.value) + "%";
});

// label the axis to indicate which direction means approval and which means disapproval
chart.yAxis().title("← Disapproval  |  Approval →");

// add vertical grid lines at ±25, ±50, ±75, and 0
chart.yScale().ticks().interval(25);
chart.yGrid(true);
chart.yGrid().stroke({color: "#dddddd", thickness: 0.5});

D. Highlight the Zero Baseline

The zero line — where approval equals disapproval — is the most important reference point in the chart. A lineMarker at value 0 draws a prominent vertical line across the plot, making the boundary between net-positive and net-negative approval immediately visible.

// draw a distinct line at zero — the boundary between net approval and net disapproval
const zeroLine = chart.lineMarker(0);
zeroLine.value(0);
zeroLine.stroke({color: "#444444", thickness: 2});

E. Add a Contextual Tooltip

By default, the tooltip shows the raw timestamp and series value. We can make it more informative by displaying the president's name and party in the title, the calendar month in the body, and the correct percentage label for each series. This can be done through a lookup table with a function to work with it, followed by the tooltip configuration itself.

Build the President Lookup Table and Function

The lookup table is an array of objects, one per president, each holding the name, party abbreviation, and the start and end dates of their term. JavaScript Date objects use zero-based month numbers, so January = 0, April = 3, August = 7, and so on.

// each entry: president name, party, and term start and end as Date objects
const presidents = [
  {name: "Franklin D. Roosevelt", party: "D", from: new Date(1941,6,1), to: new Date(1945,3,1)},
  {name: "Harry S. Truman",       party: "D", from: new Date(1945,3,1), to: new Date(1953,0,1)},
  {name: "Dwight D. Eisenhower",  party: "R", from: new Date(1953,0,1), to: new Date(1961,0,1)},
  {name: "John F. Kennedy",       party: "D", from: new Date(1961,0,1), to: new Date(1963,10,1)},
  {name: "Lyndon B. Johnson",     party: "D", from: new Date(1963,10,1),to: new Date(1969,0,1)},
  {name: "Richard Nixon",         party: "R", from: new Date(1969,0,1), to: new Date(1974,7,1)},
  {name: "Gerald Ford",           party: "R", from: new Date(1974,7,1), to: new Date(1977,0,1)},
  {name: "Jimmy Carter",          party: "D", from: new Date(1977,0,1), to: new Date(1981,0,1)},
  {name: "Ronald Reagan",         party: "R", from: new Date(1981,0,1), to: new Date(1989,0,1)},
  {name: "George H.W. Bush",      party: "R", from: new Date(1989,0,1), to: new Date(1993,0,1)},
  {name: "Bill Clinton",          party: "D", from: new Date(1993,0,1), to: new Date(2001,0,1)},
  {name: "George W. Bush",        party: "R", from: new Date(2001,0,1), to: new Date(2009,0,1)},
  {name: "Barack Obama",          party: "D", from: new Date(2009,0,1), to: new Date(2017,0,1)},
  {name: "Donald Trump",          party: "R", from: new Date(2017,0,1), to: new Date(2021,0,1)},
  {name: "Joe Biden",             party: "D", from: new Date(2021,0,1), to: new Date(2025,0,1)},
  {name: "Donald Trump",          party: "R", from: new Date(2025,0,1), to: new Date(2029,0,1)}
];

Finding the president in office on any given date requires a function that searches the lookup table by date range. getPresident() takes a timestamp, walks through the table, and returns the matching president object. If no entry covers the date, it returns null.

// find the president in office on a given date (passed as a timestamp)
function getPresident(ts) {
  const d = new Date(ts);
  for (const p of presidents) {
    if (d >= p.from && d < p.to) return p;
  }
  return null;
}

Configure the Tooltip

Two settings merge the series data and enable HTML formatting. displayMode("union") displays both series in a single tooltip, so the viewer sees approval and disapproval for the same month side by side. useHtml(true) enables HTML markup in the tooltip body, which lets us use <br/> to put values on separate lines.

// merge both series into one tooltip and allow HTML inside it
chart.tooltip().displayMode("union");
chart.tooltip().useHtml(true);

The tooltip title should name the president in office at the hovered date. titleFormat is a callback that runs once per hovered point and returns this tooltip title string. Inside it, this.x holds the timestamp of the hovered month — passed directly to getPresident() to retrieve the president's name and party.

// tooltip title: look up the president in office on the hovered date
chart.tooltip().titleFormat(function() {
  const p = getPresident(this.x);
  return p ? (p.name + " (" + p.party + ")") : "";
});

The tooltip body should show the calendar month and the series value. format runs once per series and returns that series' line in the tooltip body. A short month-name array rebuilds the date label from the timestamp. For the disapproval series, Math.abs() converts the stored negative value back to a readable positive percentage.

// month name array for formatting the date label in the tooltip body
const MON = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

// tooltip body: show the month, then the value for each series
chart.tooltip().format(function() {
  const d = new Date(this.x);
  const label = MON[d.getMonth()] + " " + d.getFullYear();
  if (this.seriesName === "Approval") {
    return label + "<br/>Approval: " + this.value + "%";
  }
  return "Disapproval: " + Math.abs(this.value) + "%";
});

Final Result

Below is the complete interactive vertical area chart with all customizations applied — smoothed curves, custom colors, formatted axis, zero baseline, and a contextual tooltip showing the president in office for any hovered month. Feel free to explore the full code and play with it further on AnyChart Playground.

Conclusion

This tutorial covered building an interactive JavaScript vertical area chart that maps more than eight decades of public opinion data in a single view. The vertical orientation, mirrored series, and contextual tooltip make it easy to compare how approval and disapproval moved together across U.S. administrations.

Browse the gallery for more vertical chart examples. To build a horizontal area chart, see the area chart tutorial. Beyond that, explore other JavaScript charting tutorials, the supported chart types, the documentation, and the API reference.

Questions? Ask in the comments or contact the Support Team.

How to Enable Pinch-to-Zoom in Stock Charts — JavaScript Chart Tips

andreykh — Fri, 10 Oct 2025 06:32:39 +0000

Stock charts are designed to handle large volumes of time-based data, and smooth navigation is key to working with them effectively. One common need is zooming — whether to focus on a specific time range in greater detail or to get a broader view of the data.

In our JavaScript stock charts, zooming works out of the box through the scroller element, which appears by default as the main navigational UI control, making it easy to adjust the visible range on the go. For even greater flexibility, the range selection UI provides extra tools like preset time period buttons and date input fields. You can also activate zooming via mouse wheel scrolling with the zoomOnMouseWheel() method, which corresponds to the two-finger swipe gesture on touchpads and trackpads.

Pinch-to-zoom is another intuitive zooming option. It allows users to zoom in and out naturally on mobile and touch devices by moving two fingers farther apart or closer together. This is also easy to implement — and it is exactly what we cover in this edition of JS Chart Tips. Learn how to add pinch-to-zoom to your JavaScript stock chart!

Question: How to Add Pinch-to-Zoom to JavaScript Stock Chart?

Recently, our Support Team received several questions about enabling pinch-to-zoom in our JavaScript stock charts. Since this feature provides a smooth and intuitive way for users to zoom in and out of time-based data using familiar gestures — particularly on mobile — we figured it would be helpful to share the solution publicly, not just with those who reached out.

Here is an animation showing the pinch zoom behavior we are talking about — zooming in or out of the timeline with a simple two-finger pinch gesture:

So, how exactly can you add pinch zooming? Let us show you! Below, we will walk you through how to enable pinch-to-zoom functionality in a stock chart using JavaScript.

Solution: Implementing Pinch Zoom in JS Stock Charts

Overview

Pinch-to-zoom essentially mirrors the behavior of holding Ctrl (or Cmd on Mac) while scrolling the mouse wheel. So, the solution involves capturing mouse wheel events triggered when the user scrolls while holding Ctrl/Cmd, preventing the default browser behavior (which would otherwise zoom the page), and dynamically adjusting the chart’s visible range by updating the X-axis scale.

This approach provides smooth, intuitive zooming — whether users scroll while holding Ctrl/Cmd or perform a pinch gesture.

Now, let’s see how this can be implemented with just a few lines of code.

In Detail

First, assuming you have already created a stock chart, access the container where the chart is rendered. You can do this by selecting the container element using document.getElementById:

var container = document.getElementById("container");

Second, add an event listener to detect when the user scrolls while holding Ctrl (or Cmd on Mac). This is done using the mousewheel event:

container.addEventListener("mousewheel", function(e) {
  // ensure zooming only happens when Ctrl (or Cmd on Mac) is pressed
  if (e.ctrlKey) {
    // prevent the default browser zoom behavior
    e.preventDefault();
    // zoom logic will go here
  }
});

Third, once a zoom event is detected, dynamically update the X-axis scale to zoom in or out by adjusting the visible range:

// retrieve the x-axis scale
var xScale = chart.xScale();

// get the current visible range
var max = xScale.getMaximum();
var min = xScale.getMinimum();

// calculate the current range
var gap = max - min;

// update the range dynamically
chart.selectRange(min - gap * e.deltaY / 200, max + gap * e.deltaY / 200);

That is basically it — your stock chart now supports pinch-to-zoom behavior.

For reference, here is the complete code, combining all the steps above:

var container = document.getElementById("container");
container.addEventListener("mousewheel", function(e) {
  if (e.ctrlKey) {
    e.preventDefault();
    xScale = chart.xScale();
    max = xScale.getMaximum();
    min = xScale.getMinimum();
    gap = max - min;
    chart.selectRange(min - gap*e.deltaY/200 , max + gap*e.deltaY/200);
  }
});

Example

Check out an example of a stock chart with pinch-to-zoom, and feel free to experiment further with its code and visualization:

Stock Chart with Pinch-to-Zoom | AnyChart Playground

Further Learning

Learn more in our JavaScript charting documentation:

Wrapping Up

Now you know how to add pinch-to-zoom support to your JavaScript stock chart, making navigation even more intuitive with familiar touch gestures and scroll actions.

Keep following the JS Chart Tips series for more practical solutions inspired by real-world cases and feature requests from our customers. If you have any questions or need assistance, our Support Team is always ready to help.

Enjoy smooth zooming into your data with our JavaScript charts!

Custom Image Markers in Quadrant Charts — JS Chart Tips

andreykh — Tue, 07 Oct 2025 10:30:48 +0000

Displaying unique images as markers can add a distinctive touch to your charts, making data visualization more engaging and informative. In this edition of JS Chart Tips, we will guide you through the process of using custom image markers for each data point in a quadrant chart with our JavaScript charting library.

Question: How to Display Custom Images as Markers in Quadrants?

A user recently reached out to our Support Team with a question that, in a nutshell, boils down to the following: “Can I change the marker in a quadrant chart into a custom image?” We recognized the need to achieve something like what is shown below:

So, the short answer is yes, and now we will show you exactly how. If you have a similar requirement, follow along!

Solution: Adding Images as Markers for Quadrant Data Points

Overview

When you create a JS quadrant chart with AnyChart, data is represented as a marker series by default. To make these markers appear as custom images, use the fill() method and specify the image source URL.

To display unique images for each data point, add a custom property in your dataset containing the image URL. By passing a custom function into the fill() method, you can dynamically extract and apply the image URLs for the series markers.

In Detail

Let's now see exactly how this solution looks in a quick example.

First of all, we create a basic quadrant chart. The following JavaScript code is enough to generate such a visualization, with data introduced as an array of objects:

anychart.onDocumentReady(function () {
  // create data
  var data = [
    {x: 4, value: 42},
    {x: 13, value: 59},
    {x: 25, value: 68},
    {x: 25, value: 63},
    {x: 44, value: 54},
    {x: 55, value: 58},
    {x: 56, value: 46},
    {x: 60, value: 54},
    {x: 72, value: 73}
  ];

  // create a chart
  var chart = anychart.quadrant(data);

  // set the chart title
  chart.title("Quadrant Chart with Images as Markers");

  // set the container id
  chart.container("container");

  // initiate drawing the chart
  chart.draw();
});

Second, for each data point, you can specify the URL of an image to be used as a marker by adding a custom property. In this example, here's how we add an image to the last data point:

{x: 72, value: 73, image: "https://pbs.twimg.com/profile_images/1389594666287476744/jbdbQ5Oh_400x400.jpg"}

Third, we customize the series by using the fill() method with a custom function to dynamically extract and apply the image URLs for each marker. In the example below, the function is set for the normal state of the data points. It applies the image URL from the dataset to each data point, and if the URL is absent, it applies a default image URL instead:

series.normal()
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png"
    };
  });

Fourth, we can customize the marker appearance to ensure the images display as intended. For example, let's adjust the size and fill mode, as well as configure how markers look not only in the normal state but also in hovered and selected states:

// customize series appearance in the normal state
series.normal()
  .size(15)
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
      mode: "fit"
    };
  });

// customize series appearance in the hovered state
series.hovered()
  .size(20)
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
      mode: "fit"
    };
  });

// customize series appearance in the selected state
series.selected()
  .size(25)
  .fill(function(){
    return {
      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
      mode: "fit"
    };
  });

That's it! Our quadrant chart now uses images as markers.

If you have a similar case, you might prefer a more concise version to achieve the same result:

// define fill logic
function customFill(point) {
  return {
    src: this.getData("image") || "https://www.anychart.com/_design/img/static/AnyChart-circle.png",
    mode: "fit"
  };
};

// apply fill logic to different states
series.normal().size(15).fill(customFill);
series.hovered().size(20).fill(customFill);
series.selected().size(25).fill(customFill);

Examples

Check out an example of a JavaScript quadrant chart with images as markers, and feel free to experiment further with its code and visualization:

Quadrant Chart with Image Markers | AnyChart Playground

Further Learning

To learn more, refer to our JavaScript charting documentation:

And the API reference:

Wrapping Up

Whenever you need custom image markers for your quadrant charts, now you know how to implement them. For more tips and tricks, keep following our JavaScript Chart Tips series. And feel free to contact our Support Team whenever you have any questions regarding any of the chart types or features of our JavaScript charting library. Have a great data visualization time!

Custom Time Intervals in Stock Charts — JS Chart Tips

andreykh — Thu, 30 Jan 2025 18:23:51 +0000

Grouping data points into appropriate time intervals is essential for making stock charts more readable and insightful. While raw data may be collected at a high frequency, such as every minute, financial analysts and traders often need to view broader trends, where grouping data into 5-minute, 15-minute, 1-hour, 1-day, and other time frames can provide clearer insights. In this edition of JS Chart Tips, we will walk you through the process of setting a custom time interval for a stock chart using our JavaScript charting library.

Question: How to Set Stock Data Grouping Intervals?

Recently, our Support Team received a question from a user who wanted to change the default interval of their candlestick chart. Specifically, they had data with a 1-minute interval and wanted each candlestick to represent 5 minutes.

Below is a common scenario when working with grouped time intervals, and we will now demonstrate how to achieve this:

Solution: Creating Custom Data Grouping in Stock Charts

Overview

If you have stock data recorded at a short time interval but want to display points grouped into longer periods — either as a fixed setting or with interactive switching — this can be easily achieved using the Data Grouping feature.

In our JavaScript stock charts, the grouping() method lets you control how data is aggregated into larger intervals, allowing you to easily customize how your candlesticks, OHLC bars, or data points in other stock chart series appear.

In Detail

First, access the grouping() object from your stock chart:

var grouping = chart.grouping();

Second, enable forced grouping to ensure the chart applies your custom settings:

grouping.forced(true);

Third, define the grouping levels by specifying the desired time unit and interval. In the original customer question, the request was to use a five-minute grouping:

grouping.levels([{
  unit: 'minute',
  count: 5
}]);

See the complete code enabling this type of stock data grouping below:

// create a grouping variable
var grouping = chart.grouping();

// force the grouping
grouping.forced(true);

// set the grouping level to 5 minutes
grouping.levels([{
  unit: 'minute',
  count: 5
}]);

Of course, you're more than welcome to use method chaining if you desire:

chart.grouping().forced(true).levels([{unit: 'minute', count: 5}]);

Examples

Check out an example of a JS candlestick chart with a 5-minute interval, and feel free to experiment further with its code and visualization:

Candlestick Stock Chart with 5-Minute Interval | AnyChart Playground

For a demonstration of an interactive approach that allows switching between different time intervals, explore this example using grouping control buttons for 1, 5, and 10 minutes:

Candlestick Stock Chart with Grouping Control Buttons | AnyChart Playground

Further Learning

To learn more about data grouping in stock charts, refer to our JavaScript charting documentation, which includes additional examples:

Data Grouping — Stock Charts | AnyChart JS Documentation

Wrapping Up

Applying custom time frame intervals in stock charts can help users better analyze financial data by focusing on meaningful periods. With the data grouping feature, it is easy to control how candlesticks or bars are displayed, ensuring clear and concise data visualization.

For any additional questions, feel free to reach out to our Support Team.

Stay connected with our JavaScript Chart Tips series, where we share best practices and techniques inspired by real-world cases from our customers.

Happy coding and charting with JavaScript!

Python Django Financial Trading Dashboard — Integrating AnyChart JS Charts

andreykh — Thu, 05 Dec 2024 09:48:35 +0000

We are pleased to share a helpful article we've found on EODHD APIs, where Michael Whittle, a seasoned developer and top Medium author, shows how he integrated our JavaScript charting library into his Python Django-based trading dashboard.

In particular, he discusses his experience migrating a treemap from D3.js to AnyChart and explains why he chose our solution for implementing a stock chart, highlighting the intuitive code and enhanced functionality.

Read on to discover how you can elevate your financial data visualizations in Python Django web applications with AnyChart JS Charts.

This article builds upon the previous two in the series, “Build a Financial Trading Dashboard with Python Django” and “Enhancing the Financial Trading Dashboard with Python Django”.

Initially, I created the treemap on the landing page using the D3.js library. While it worked well, I wanted to explore other charting options, so I evaluated both Chart.js and AnyChart. Ultimately, I decided to migrate the treemap from D3.js to AnyChart. Although the visual appearance of the charts is quite similar, I found AnyChart’s code significantly more intuitive and easier to understand. Additionally, I personally feel that the AnyChart treemap offers slightly more functionality and appears more polished. That said, I also liked the aesthetic of Chart.js, which remains a viable option.

In the previous article, I created a page displaying the historical data of a market, presented neatly using a Bootstrap data table. For this article, I wanted to include an appealing stock chart above the table. Once again, I considered the three charting libraries, but I was particularly impressed with the way AnyChart presented the data and the functionality it offered. This article will explain how this was achieved.

Finally, I discovered another useful feature available in Bootstrap. In the previous article, I demonstrated how to add an “Export to Excel” button. Similarly, with just one line of code, you can also add a “Print” button. This feature takes the data from the Bootstrap table and presents it in a print-friendly format.

Quick jump:

Updating the View

Updating the Template — index.html

Updating the Template — historical_data.html

Summary

Next Steps

Updating the View

I only had to make one change to a view to get the historical data stock chart working.

def fetch_historical_data(request, market, interval):
  now = datetime.now()

  if interval in ["m", "w", "d"]:
    end_date = now.date().isoformat()
    start_date = (now - timedelta(days=300)).date().isoformat()
  else:
    end_date = now.strftime("%Y-%m-%dT%H:%M")
    start_date = (now - timedelta(hours=300)).strftime("%Y-%m-%dT%H:%M")

  start_date = request.GET.get("from", start_date)
  end_date = request.GET.get("to", end_date)

  def parse_datetime(dt_str):
    try:
      return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M:%S")
    except ValueError:
      try:
        return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M")
      except ValueError:
        return datetime.strptime(dt_str, "%Y-%m-%d")

  start_date_parsed = parse_datetime(start_date)
  end_date_parsed = parse_datetime(end_date)

  if interval in ["m", "w", "d"]:
    start_date = start_date_parsed.strftime("%Y-%m-%d")
    end_date = end_date_parsed.strftime("%Y-%m-%d")
  else:
    start_date_unix = int(start_date_parsed.timestamp())
    end_date_unix = int(end_date_parsed.timestamp())

  endpoint = "eod" if interval in ["m", "w", "d"] else "intraday"
  interval_type = "period" if interval in ["m", "w", "d"] else "interval"

  if interval not in ["m", "w", "d"]:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date_unix}&to={end_date_unix}&api_token={settings.EODHD_API_TOKEN}&fmt=json"
  else:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date}&to={end_date}&api_token={settings.EODHD_API_TOKEN}&fmt=json"

  print(url)
  response = requests.get(url)
  data = response.json()

  def format_unix_timestamp(unix_ts):
    return datetime.utcfromtimestamp(unix_ts).strftime("%Y-%m-%d %H:%M:%S")

  for entry in data:
    if "date" in entry:
      entry["timestamp"] = entry.pop("date")
    elif "datetime" in entry:
      datetime_value = entry.pop("datetime")
      try:
        entry["timestamp"] = format_unix_timestamp(int(datetime_value))
      except ValueError:
        entry["timestamp"] = datetime_value

  if not data or "error" in data:
    data = []

  raw_data = data
  historical_data_json = json.dumps(data)

  return render(
    request,
    "historical/historical_data.html",
    {
      "market": market,
      "interval": interval,
      "historical_data": raw_data,  # Raw Python data for the table
      "historical_data_json": historical_data_json,  # JSON for the script
      "start_date": (
        start_date
        if interval in ["m", "w", "d"]
        else start_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
      "end_date": (
        end_date
        if interval in ["m", "w", "d"]
        else end_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
    },
  )

If you pay close attention to the function’s output, you’ll notice that I have separated the data into two parts. The first, “historical_data”, contains the raw data returned by the API, which is used for the Bootstrap data table. The second, “historical_data_json”, is a sanitised version of the data in JSON format, required for the AnyChart stock chart. Getting this to work was actually quite challenging. I wanted to provide two ways of visualising the historical data, but each required the data in a different format. This approach proved to be an effective solution.

Updating the Template — index.html

As I mentioned above, my initial treemap used the D3.js library. I evaluated both the Chart.js and AnyChart libraries. I found the AnyChart library to be initiative and look a lot nicer and more polished. I’ve included the converted code below.

GOTCHA

I encountered one of the strangest bug that had me puzzled for several days. When I initially converted the treemap code from D3.js to AnyChart, it worked flawlessly. I then shifted my focus to the Historical Data stock chart, but when I returned to the AnyChart treemap, it wasn’t rendering properly. Although the API was receiving data for 110 market indices, only 11 were displaying.

To debug this, I had to strip the code down to its simplest components. The “problem,” as it turned out, was related to my inclusion of daily_return as the value for the treemap. I chose to use daily_return instead of the number of constituents because it created a more visually appealing colour gradient between high and low values. However, I discovered that treemaps require positive numbers as values to render correctly—that’s simply how they work.

When I initially got it working, market conditions must have been exceptionally good, as all the daily returns were positive. By the time I revisited the code a few days later, some daily returns were negative, which caused only 11 entries to display.

To address this, I devised a simple yet effective solution. I ensured that the value passed to the treemap was always absolute (a positive number) and removed this value from the cell display. Instead, I added it to a tooltip that appears on mouse hover. This allowed the treemap to render correctly with a pleasing colour gradient, while still enabling the actual value to be displayed when needed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Market Indices Treemap</title>

  https://cdn.anychart.com/releases/8.13.0/js/anychart-bundle.min.js
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      background-color: #343a40;
      color: #ffffff;
    }
    #treemap {
      width: 100%;
      height: 80vh;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="container mt-5">
    <form action="{% url 'search_market_data' %}" method="get" class="d-flex justify-content-center my-4">
      <input type="text" name="query" class="form-control w-50" placeholder="Search market data..." required>
      <button type="submit" class="btn btn-primary ml-2">Search</button>
    </form>

    <div id="treemap"></div>
  </div>

  <script>
    const data = [
      { 
        name: "Market Indices", 
        children: [
          {% for index in indices %}
          {
            name: "{{ index.code }} [{{ index.constituents }}]",
            value: Math.abs(parseFloat("{{ index.daily_return|default:0 }}")) || 0,
            originalValue: parseFloat("{{ index.daily_return|default:0 }}"),
            id: {{ forloop.counter }},
            link: "/constituents/{{ index.index_id }}/",
            description: "Constituents: {{ index.constituents }}"
          },
          {% endfor %}
        ]
      }
    ];

    anychart.onDocumentReady(function() {
      const chart = anychart.treeMap(data, "as-tree");

      chart.background().fill("#343a40");

      const colorScale = anychart.scales.linearColor();
      colorScale.colors(["#d73027", "#fee08b", "#1a9850"]);
      chart.colorScale(colorScale);

      chart.labels()
        .fontColor("#ffffff")
        .fontSize(function() {
          return this.getData("value") > 100 ? 16 : 12;
        })
        .hAlign("center")
        .vAlign("middle")
        .format("{%name}");

      chart.tooltip()
        .useHtml(true)
        .format(function() {
          return `<strong>${this.getData('name')}</strong><br>
              Value: ${this.getData('originalValue')}<br>
              Link: <a href="${this.getData('link')}" target="_blank">${this.getData('link')}</a>`;
        });

      chart.hovered()
        .fill(anychart.color.lighten("#007bff", 0.4))
        .stroke("#d3d3d3");

      chart.listen("pointClick", function(e) {
        const link = e.point.get("link");
        if (link) {
          window.location.href = link;
        }
      });

      chart.maxDepth(null);

      chart.padding(10, 10, 10, 10);
      chart.stroke("#ffffff");
      chart.minHeight(5);
      chart.minWidth(5);

      chart.labels().fontSize(11);

      chart.data(data);
      chart.container("treemap");
      chart.draw();
    });
  </script>
</body>
</html>

Updating the Template — historical_data.html

The next part was to add the AnyChart stock chart above the historical data Bootstrap table. As I mentioned above, I also added the “Print” button which could be handy.

I found both Chart.js and AnyChart had really pleasant feature rich graphs. I decided to use AnyChart because I didn’t want to mix the libraries in the app, but I also quite liked the way the graph looked.

What I really nice is that the graph is interactive. You can pan, zoom, and mouse over the data points for additional information. As a stock start you also can see the candlesticks visually represented like most trading applications. A green bar if the close is higher than the open, and a red car if the close is lower than the open.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Historical Data for {{ market }} ({{ interval }})</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap4.min.css">

  <style>
    body {
      background-color: #343a40;
      color: #ffffff;
    }

    .table {
      background-color: #212529;
    }

    .table th, .table td {
      color: #ffffff;
    }

    .chart-container {
      margin-bottom: 20px;
    }

    .dt-buttons .btn {
      margin-right: 10px;
    }

    .page-item.active .page-link {
      z-index: 3;
      color: #ffffff !important;
      background-color: #495057 !important;
      border-color: #495057 !important;
    }

    .page-link {
      color: #ffffff !important;
      background-color: #6c757d !important;
      border-color: #343a40 !important;
    }

    .page-link:hover {
      color: #adb5bd !important;
      background-color: #5a6268 !important;
      border-color: #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      color: #ffffff !important;
      background-color: #6c757d !important;
      border: 1px solid #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      background-color: #5a6268 !important;
      border: 1px solid #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      color: #ffffff !important;
      background-color: #495057 !important;
      border: 1px solid #343a40 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
      background-color: #6c757d !important;
      color: #ffffff !important;
    }

    .btn-dark {
      background-color: #6c757d !important;
      border-color: #6c757d !important;
      color: #ffffff !important;
    }

    .btn-dark:hover {
      background-color: #5a6268 !important;
      border-color: #5a6268 !important;
    }
  </style>
</head>

<body>
  <div class="container mt-5">
    <h2 class="mb-4">Historical Data for {{ market }} ({{ interval }})</h2>

    <div class="row">
      <div class="col-12 chart-container">
        <div id="candlestickChart" style="height: 500px; width: 100%;"></div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <table id="historicalTable" class="table table-dark table-striped table-bordered">
          <thead class="thead-dark">
            <tr>
              <th>Timestamp</th>
              <th>Open</th>
              <th>High</th>
              <th>Low</th>
              <th>Close</th>
              <th>Volume</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in historical_data %}
            <tr>
              <td>{{ entry.timestamp }}</td>
              <td>{{ entry.open }}</td>
              <td>{{ entry.high }}</td>
              <td>{{ entry.low }}</td>
              <td>{{ entry.close }}</td>
              <td>{{ entry.volume }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <a href="javascript:history.back()" class="btn btn-dark mt-4">Back</a>
  </div>

  <script id="historicalData" type="application/json">
    {{ historical_data_json|safe }}
  </script>

  https://code.jquery.com/jquery-3.5.1.min.js
  https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
  https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap4.min.js
  https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js
  https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js
  https://cdn.anychart.com/releases/8.13.0/js/anychart-bundle.min.js

  <script>
    $(document).ready(function() {
      $('#historicalTable').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        lengthMenu: [10, 25, 50, 100],
        order: [[4, "desc"]],
        dom: 'Bfrtip',
        buttons: [
          {
            extend: 'excel',
            text: 'Export to Excel'
          },
          {
            extend: 'print',
            text: 'Print'
          }
        ]
      });
    });

    document.addEventListener("DOMContentLoaded", function () {
      const rawData = document.getElementById("historicalData").textContent;
      const historicalData = JSON.parse(rawData);

      const chartData = historicalData.map(entry => [
        entry.timestamp,
        entry.open,
        entry.high,
        entry.low,
        entry.close
      ]);

      anychart.onDocumentReady(function () {
        const chart = anychart.stock();

        const table = anychart.data.table();
        table.addData(chartData);

        const mapping = table.mapAs({
          open: 1,
          high: 2,
          low: 3,
          close: 4
        });

        const plot = chart.plot(0);
        plot.candlestick(mapping).name('Price');

        chart.container("candlestickChart");
        chart.draw();
      });
    });
  </script>
</body>

</html>

Summary

I find the code of AnyChart's JavaScript charting library straightforward to read and understand. However, the graphs display a “trial version” watermark. The purchasing of a licence removes this watermark and offers additional support. Despite this, the trial version has functioned well for me.

Next Steps

The next article in the series will explore incorporating fundamental data and market capitalisation into the application.

Originally published on EODHD.com, a one-stop shop for financial data APIs, under the title "AnyChart integration for the Financial Trading Dashboard with Python Django" in November 2024.

Written by Michael Whittle, a solution architect, developer, and analyst with over twenty years of experience, and a top author on Medium.

Useful AnyChart Links

Creating a Roman History Timeline Chart in JavaScript

andreykh — Fri, 11 Oct 2024 07:10:57 +0000

Ever caught yourself thinking about the Roman Empire more often than you’d like to admit? You’re not alone, and we’ve got just the thing for you! With the recent AnyChart JS Charts 8.13.0 release, we’ve enhanced our timeline chart for better support of historical data visualization.

We’d love to showcase this improvement in action. We’ve added a Roman History Timeline to our gallery of timeline chart examples, and we now invite you to discover how it was developed from scratch. In this in-depth JavaScript charting tutorial, we’ll cover everything from A to Z, meticulously guiding you through each step — from setting up the HTML environment to adding detailed data and customizing the visualization to make the chart both informative and engaging. The final result is an interactive timeline that you can proudly call your own Roman Empire.

So, whether you’re a history enthusiast caught up in the recent meme trend or a developer eager to expand your data visualization skills, follow along and learn how to create compelling historical timeline charts using JavaScript!

Introduction
Step 1: Setting Up Environment
- 1.1. Create Basic HTML Document
- 1.2. Create Container for Chart
- 1.3. Include All Necessary Resources
- 1.4. Complete HTML Setup
Step 2: Adding Data
- 2.1. Define Periods (Ranges)
- 2.2. Define Events (Moments)
- 2.3. Complete Data Loading Function
Step 3: Creating Timeline Chart
- 3.1. Prepare Ground
- 3.2. Set Up Chart
- 3.3. Set Data to Chart
  - 3.3.1. Load Data
  - 3.3.2. Set Series for Periods (Ranges)
  - 3.3.3. Set Series for Events (Moments)
- 3.4. Customize Tooltips
  - 3.4.1. Configure Period Tooltips
  - 3.4.2. Configure Event Tooltips
  - 3.4.3. Complete Tooltip Customization
- 3.5. Enhance Navigation
  - 3.5.1. Add Scrollbar
  - 3.5.2. Set Up Zoom Interactivity
  - 3.5.3. Add Zoom Control Buttons
- 3.6. Add Era Designators
- 3.7. Set Font for Axis Labels
- 3.8. Set Chart Title
- 3.9. Set Container and Draw Chart
- 3.10. Complete JavaScript Timeline Code
Step 4: CSS Styling
- 4.1. Style HTML, Body, Container
- 4.2. Style Zoom Control Buttons
- 4.3. Style Tooltips
- 4.4. Complete CSS Code
Result: Timeline Chart of Roman History
Wrapping Up

Introduction

Visualizing historical data can be challenging, especially when dealing with extensive timelines and precise dates. With the latest improvements in the AnyChart JavaScript charting library, creating detailed and accurate timeline charts is more accessible than ever.

In this tutorial, we’ll build an interactive JS timeline for a web page, which illustrates significant periods and events in Roman history, complete with custom tooltips and convenient navigation. Take a glance below to see how the final result will look, and let’s begin!

Step 1: Setting Up Environment

To get started with building our timeline, we need to set up a basic HTML structure for our webpage. This includes setting up the document, creating a container to display the chart, and linking the necessary resources.

1.1. Create Basic HTML Document

First, we need to create a basic HTML document that defines the structure of the page. This is the foundation of any webpage.

<!DOCTYPE html>
<html>
  <head>
    <title>Roman Civilization Timeline with All Data</title>
  </head>
  <body>
  </body>
</html>

1.2. Create Container for Chart

Next, we need a container where the timeline chart will be displayed. This can be a simple <div> element with a specific ID, placed in the <body> section:

<div id="container"></div>

This element will act as the placeholder for our chart. We will reference it in the JavaScript code to generate the visualization.

1.3. Include All Necessary Resources

Now, it’s time to include the necessary resources for our web project. Let’s use a custom web font. For example, Cinzel from Google Fonts. Simply include the relevant links in the <head> section:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

We also need to connect the AnyChart JavaScript library to bring in the charting functionality. Link the required modules similarly in the <head> section:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-timeline.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-ui.min.js"></script>

These <script> tags include the core charting library, the dedicated timeline chart module, and the UI module to customize the user interface. Now, we are ready to place the JavaScript timeline charting code within the <script> tag in the <body> section:

<script>
  // The place for the JavaScript charting code
</script>

1.4. Complete HTML Setup

At this point, here’s what the complete HTML structure looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>Roman Empire Timeline</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-timeline.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-ui.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // The place for the JavaScript charting code
    </script>
  </body>
</html>

Step 2. Adding Data

Now that we’ve set up the structure, it’s time to add data that will populate our timeline. There are multiple ways to do this. Here, within the JavaScript code of the chart, we’ll create a function called loadData() to add all the data as objects:

function loadData(){
  // The data comes here…
};

The data to be visualized consists of two main types:

Periods: Time ranges representing significant durations, like reigns of emperors or historical eras.
Events: Specific historical moments, such as battles or important occurrences.

Let’s proceed by adding the data for each type.

2.1. Define Periods (Ranges)

Periods are represented as time ranges. Each one has:

name: The label or title, such as “Legendary” or “Emperors.”
direction: Defines the orientation on the timeline as either pointing "up" (up) or "down" (down).
ranges: An array of specific data ranges, each with a name or title (name) to identify the period, start (start) and end (end) dates that mark the time span, and additional attributes like images (img) and descriptions (description).

For example, here’s the code defining the period of “Legendary” kings:

var periods = [{}];
periods[0] = {};
periods[0].name = "Legendary";
periods[0].direction = "up";
periods[0].ranges = [
  {
    name: "Romulus", 
    start: new Date(Date.UTC(-753, 0, 0)), 
    end: new Date(Date.UTC(-717, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg/250px-Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg",
    description: "The legendary founder and first king of Rome, who established the city's foundations."
  },
  // Other kings follow
];

Add more periods in a similar manner:

// 1) Add periods (ranges):
var periods = [{}];

// legendaries' years of life
periods[0] = {};
periods[0].name = "Legendary";
periods[0].direction = "up";
periods[0].ranges = [
  {
    name: "Romulus", 
    start: new Date(Date.UTC(-753, 0, 0)), 
    end: new Date(Date.UTC(-717, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg/250px-Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg",
    description: "The legendary founder and first king of Rome, who established the city's foundations."
  },

  // Other legendary kings follow

];

// consuls' years of rule
periods[1] = {};  
periods[1].name = "Consuls";
periods[1].direction = "up";
periods[1].ranges = [
  {
    name: "Consulate", 
    start: new Date(Date.UTC(-509, 0, 0)), 
    end: new Date(Date.UTC(-27, 0, 16)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Roman_SPQR_banner.svg/150px-Roman_SPQR_banner.svg.png",
    description: "Consuls were elected annually, and the position was often shared by two individuals, making it difficult to track the exact reign periods for all consuls over the centuries."
  }
];

// emperors' years of life
periods[2] = {};    
periods[2].name = "Emperors";
periods[2].direction = "up";
periods[2].ranges = [
  {
    name: "Augustus",
    start: new Date(Date.UTC(-27, 0, 16)),
    end: new Date("0014-08-19"),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Augustus_of_Prima_Porta_%28inv._2290%29.jpg/250px-Augustus_of_Prima_Porta_%28inv._2290%29.jpg",
    description: "First Roman emperor, marking the transition from the Roman Republic to the Empire."
  },

  // Other emperors follow

];

// historical states' years of existence
periods[3] = {};
periods[3].name = "Historical states";
periods[3].direction = "down";
periods[3].ranges = [
  {
    x: "Roman Kingdom", 
    start: new Date(Date.UTC(-753)), 
    end: new Date(Date.UTC(-509)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Platner_-_Ancient_Rome_city_growth.jpg/375px-Platner_-_Ancient_Rome_city_growth.jpg",
    description: "The Roman Kingdom is the earliest period of Roman history, traditionally dated from the founding of Rome in 753 BC to the overthrow of the last king in 509 BC, marking the transition from a monarchy to a republic."
  },

  // Other states follow

];

2.2. Define Events (Moments)

Events are individual moments that don't span long periods but occur on specific dates. Each one has:

name: The event’s title (e.g., "Sack of Rome by Gauls").
direction: Orientation on the timeline (up or down).
moments: An array of events that include names (y), dates (x), and additional attributes like images (img) and descriptions (description).

For example, here's how to define wars and battles:

var events = [];
events[0] = {};  
events[0].name = "Wars and Battles";
events[0].direction = "up";
events[0].moments = [
  {
    y: "Sack of Rome by Gauls", 
    x: new Date(Date.UTC(-390, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/8/88/La_Bataille_de_l%27allia_-_G.Surand.jpg",
    description: "Gauls under Brennus sacked Rome after the Battle of the Allia, causing major devastation."
  },
  // Other wars and battles follow
];

Add more events similarly:

// 2) Add moments (events):
var events = [];

// wars and battles
events[0] = {};  
events[0].name = "Wars and Battles";
events[0].direction = "up";
events[0].moments = [
  {
    y: "Sack of Rome by Gauls", 
    x: new Date(Date.UTC(-390, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/8/88/La_Bataille_de_l%27allia_-_G.Surand.jpg",
    description: "Gauls under Brennus sacked Rome after the Battle of the Allia, causing major devastation."
  },
  // Other wars and battles follow
];

// establishments
events[1] = {};  
events[1].name = "Establishments";
events[1].direction = "down";
events[1].moments = [
  {
    y: "Establishment of Rome", 
    x: new Date(Date.UTC(-753, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Kapitolinische_Wölfin_Museum_Capitolini.jpg/330px-Kapitolinische_Wölfin_Museum_Capitolini.jpg",
    description: "Rome was founded, according to legend, by Romulus and Remus."
  },

  // Other establishments follow

];

// disasters
events[2] = {};  
events[2].name = "Disasters";
events[2].direction = "down";
events[2].moments = [
  {
    y: "Assassination of Julius Caesar", 
    x: new Date(Date.UTC(-44, 0, 0)),
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg/375px-Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg",
    description: "Caesar was killed by Roman senators to stop his increasing power."
  },

// Other disasters follow

];

2.3. Complete Data Loading Function

Once all periods and events are defined, the loadData() function can be finalized, ensuring it returns both periods and events to populate the timeline chart:

// Function to add data for the timeline chart:
function loadData(){

  // 1) Add periods (ranges)
  // …

  // 2) Add events (moments)
  // …

  return {"periods": periods, "events": events}

};

This loadData() function is crucial, as it prepares the dataset that will feed into the chart graphically representing the periods and events of Roman history. With this step complete, we’re now ready to configure the timeline visualization of this data.

Step 3. Creating Timeline Chart

Now, let’s initialize and generate the timeline chart with the data we’ve added.

3.1. Prepare Ground

As previously mentioned, all the JavaScript code responsible for chart creation should be inside the <script> tag within the <body> section of the HTML document. Additionally, to ensure all the main charting code runs only after the entire page has fully loaded with all external resources, wrap it within the anychart.onDocumentReady() function. This prevents errors related to accessing elements before they exist. Here’s the basic structure:

<body>
  <script>
    anychart.onDocumentReady(function () {
      // The place for the main JavaScript Timeline Chart code
    });
  </script>
</body>

Then, declare a chart variable. In a typical case, it could be done within the anychart.onDocumentReady() function. However, since we will need to access it from other functions as well, we will declare it outside the function. The rest of the JavaScript code will be placed inside anychart.onDocumentReady(), unless specified otherwise.

<body>
  <script>
    // Create a chart variable here to be accessible from various places in the script
    var chart;
    // Ensure the main charting code runs after the page has loaded with all external resources
    anychart.onDocumentReady(function () {
      // Main JavaScript Timeline Chart code goes here
    });
    // Other functions go here
  </script>
</body>

3.2. Set Up Chart

Now, we need to set up the timeline chart. To create this type of data visualization, use the anychart.timeline() method. This initializes the chart object, which will be later configured with data and styling options.

chart = anychart.timeline();

To make sure the chart displays data within the right time frame, set the minimum and maximum dates for the timeline's scale. This helps display all periods and events properly, from early Roman history to later stages.

chart.scale().minimum(Date.UTC(-1000));
chart.scale().maximum(Date.UTC(1500));

These two lines define the visible range of the timeline from 1000 BC to 1500 AD.

3.3. Set Data to Chart

It’s time to populate the timeline with the data we’ve structured in the loadData() function in Step 2. Recall that this data includes periods (ranges) and events (moments).

3.3.1. Load Data

First, retrieve the structured data by calling loadData():

var data = loadData();

Now, we’ll set up the data series.

3.3.2. Set Series for Periods (Ranges)

To display the periods, i.e. a range series, use the range() method. The data for periods is in the periods array, and we will loop through it to set each period in the chart. Here’s how to loop through the periods and bind them to the chart:

// 1) Set the range series for periods (e.g., rulers, empires)
for (let i = 0; i < data.periods.length; i++) {
  var period = data.periods[i];
  var range = chart.range(period.ranges);
  range.name(period.name);
  range.direction(period.direction);    
  range.labels().fontFamily("Cinzel");
};

3.3.3. Set Series for Events (Moments)

For events, use the moment() method. Similarly, we’ll loop through the events array and create a moment series for each set of events.

// 2) Set the moment series for events (e.g., battles, establishment of states)
for (let i = 0; i < data.events.length; i++) {
  var event = data.events[i];
  var moment = chart.moment(event.moments);
  moment.name(event.name);
  moment.direction(event.direction);
  moment.labels().fontFamily("Cinzel");
};

3.4. Customize Tooltips

Tooltips enhance user experience by providing additional details when users hover over periods and events in the timeline. Both the period (range) and event (moment) series support rich HTML content, allowing you to display descriptions, images, and other information in a user-friendly format. Let’s customize the tooltips.

3.4.1. Configure Period Tooltips

For example, here’s how you can customize the tooltip for the range series (periods). First, create a tooltip variable:

var tooltip = range.tooltip();

Second, enable HTML content in the tooltip:

tooltip.useHtml(true);

Third, format the tooltip to include all the information that needs to be displayed, in the desired way:

tooltip.format(function(){
  var img = this.getData("img");
  var description = this.getData("description");
  return "<center><img src='" + img + "'/></center><p style='max-width: 250px;'>" + description + "</p>";
});

Fourth, if you don’t want to have the line separating the tooltip header from the tooltip content, simply remove it:

tooltip.separator(false);

Finally, it’s possible to customize the tooltip header separately:

// enable HTML in the tooltip header
tooltip.title().useHtml(true);
// format the tooltip header
tooltip.titleFormat(function(){
  // use the anychart.format.dateTime() method to format the dates      
  var start = anychart.format.dateTime(this.start, "y G");
  var end = anychart.format.dateTime( this.end, "y G");
  return "<p>" + this.x + " (" + start + " – " + end + ")</p>";
});

Here’s how the entire tooltip customization code looks in this case:

// create a variable
var tooltip = range.tooltip();
// enable HTML in the tooltip
tooltip.useHtml(true);
// format the tooltip content
tooltip.format(function(){
  var img = this.getData("img");
  var description = this.getData("description");
  return "<center><img src='" + img + "'/></center><p style='max-width: 250px;'>" + description + "</p>";
});
// disable the tooltip separator
tooltip.separator(false);
// enable HTML in the tooltip header
tooltip.title().useHtml(true);
// format the tooltip header
tooltip.titleFormat(function(){
  // use the anychart.format.dateTime() method to format the dates      
  var start = anychart.format.dateTime(this.start, "y G");
  var end = anychart.format.dateTime( this.end, "y G");
  return "<p>" + this.x + " (" + start + " – " + end + ")</p>";
});

3.4.2. Configure Event Tooltips

Similarly, customization can be applied to the tooltip of the moment series (events):

// create a variable
var tooltip = moment.tooltip();
// enable HTML in the tooltip
tooltip.useHtml(true);
// format the tooltip content
tooltip.format(function(){
  var img = this.getData("img");
  var description = this.getData("description");
  return "<center><img src='" + img + "'/></center><p style= 'max-width: 250px;'>" + description + "</p>";
});
// disable the tooltip separator
tooltip.separator(false);
// enable HTML in the tooltip header
tooltip.title().useHtml(true);
// format the tooltip header
tooltip.titleFormat(function(){
  var x = new Date(this.x);
  // use the anychart.format.dateTime() method for date formatting
  var formatted = anychart.format.dateTime(x, "y G");
  return "<p>" + this.value + ", " + formatted + "</p>";
});

3.4.3. Complete Tooltip Customization

Finally, let’s combine everything within the series configuration functions to ensure proper functionality in the current setting.

// 1) Set the range series for periods (e.g., rulers, empires)
for (let i = 0; i < data.periods.length; i++) {
  var period = data.periods[i];
  var range = chart.range(period.ranges);
  range.name(period.name);
  range.direction(period.direction);    
  range.labels().fontFamily("Cinzel");
  // Customize the range series tooltip:
  var tooltip = range.tooltip();
  // enable HTML in the tooltip
  tooltip.useHtml(true);
  // format the tooltip content
  tooltip.format(function(){
    var img = this.getData("img");
    var description = this.getData("description");
    return "<center><img src='" + img + "'/></center><p style='max-width: 250px;'>" + description + "</p>";
  });
  // disable the tooltip separator
  tooltip.separator(false);
  // enable HTML in the tooltip header
  tooltip.title().useHtml(true);
  // format the tooltip header
  tooltip.titleFormat(function(){
    // use the anychart.format.dateTime() method to format the dates      
    var start = anychart.format.dateTime(this.start, "y G");
    var end = anychart.format.dateTime( this.end, "y G");
    return "<p>" + this.x + " (" + start + " – " + end + ")</p>";
  });
};

// 2) Set the moment series for events (e.g., battles, establishment of states)
for (let i = 0; i < data.events.length; i++) {
  var event = data.events[i];
  var moment = chart.moment(event.moments);
  moment.name(event.name);
  moment.direction(event.direction);
  moment.labels().fontFamily("Cinzel");
  // Configure the moment series tooltip:
  var tooltip = moment.tooltip();
  // enable HTML in the tooltip
  tooltip.useHtml(true);
  // format the tooltip content
  tooltip.format(function(){
    var img = this.getData("img");
    var description = this.getData("description");
    return "<center><img src='" + img + "'/></center><p style= 'max-width: 250px;'>" + description + "</p>";
  });
  // disable the tooltip separator
  tooltip.separator(false);
  // enable HTML in the tooltip header
  tooltip.title().useHtml(true);
  // format the tooltip header
  tooltip.titleFormat(function(){
    var x = new Date(this.x);
    // use the anychart.format.dateTime() method for date formatting
    var formatted = anychart.format.dateTime(x, "y G");
    return "<p>" + this.value + ", " + formatted + "</p>";
  });
};

3.5. Enhance Navigation

Navigation plays a critical role in timeline charts, especially when working with extensive historical datasets. By default, you can use the mouse to navigate timeline charts: move along the timeline by dragging, and zoom in and out using the mouse wheel. To enrich this behavior and make the visualization even more navigable, let’s add a scrollbar element (scroller), zoom-on-click functionality (to zoom in on a moment or range), and zoom control buttons (to easily focus on specific eras in the timeline of Roman history).

3.5.1. Add Scrollbar

Adding a scrollbar allows users to navigate through the timeline easily. It can be enabled with a single line of code:

chart.scroller(true);

The scroller will appear below the timeline.

3.5.2. Set Up Zoom Interactivity

To make the timeline more interactive, let’s add an event listener that zooms into a specific period or event when clicked. Here’s how. First, add an event listener that triggers when a point (either a period or event) is clicked:

chart.listen("pointClick", function(e){
  // Configure the chart listener here
};

Second, declare variables that will define the area for zooming:

var start, end, gap;

Third, determine if the clicked element is a moment or a period:

var type = e.series.getType();

Fourth, configure the behavior for moments. We’ll zoom in on them with a 50-year margin before and after:

if (type == "moment") {
  var momentDate =  e.point.get("x");
  start = momentDate;
  end = momentDate;
  // 50 years in milliseconds
  gap = 1577880000000;
}

Fifth, specify the desired behavior for non-moment elements, i.e. periods. We’ll zoom into them with a 10% margin before and after.

else {
  start = e.point.get("start");
  end = e.point.get("end");
  gap = (end - start)/10;
}

Now that all prerequisites have been set up, use the zoomTo() method to finalize the configuration of the zooming functionality within the event listener.

chart.zoomTo(start - gap, end + gap);

Check out the entire code that configures this zoom interactivity within the event listener:

// Add an event listener to zoom into an element when it's clicked:
chart.listen("pointClick", function(e){
  var start, end, gap;
  // check if the clicked element is a moment or a period
  var type = e.series.getType();
  // configure the behavior for moments
  if (type == "moment") {
    var momentDate =  e.point.get("x");
    // zoom into the moment, showing 50 years before and after it
    start = momentDate;
    end = momentDate;
    // 50 years in milliseconds
    gap = 1577880000000;
  } else { // for periods (non-moment elements)
    // zoom into the period, showing 10% of its length before its start and after its end
    start = e.point.get("start");
    end = e.point.get("end");
    gap = (end - start)/10;
  };
  // zoom into the element when it's clicked
  chart.zoomTo(start - gap, end + gap);    
});

Importantly, since we're working with years and centuries (without the need for quarters, months, and so on), we should patch the zoom levels on the timeline scale. Configure this using a new function placed outside of anychart.onDocumentReady().

// Function to patch the zoom levels on the timeline scale
function patchedZoomLevels(){
  var customZoomLevels = [
    [
      {"unit": "month", "count": 1},
      {"unit": "quarter", "count": 1},
      {"unit": "year", "count": 1}
    ],
    [
      {"unit": "quarter", "count": 1},
      {"unit": "year", "count": 1},
      {"unit": "year", "count": 10}
    ],
    [
      {"unit": "year", "count": 1},
      {"unit": "year", "count": 10},
      {"unit": "year", "count": 50}
    ],
    [
      {"unit": "year", "count": 10},
      {"unit": "year", "count": 50},
      {"unit": "year", "count": 100}
    ],
    [
      {"unit": "year", "count": 50},
      {"unit": "year", "count": 100},
      {"unit": "year", "count": 500}
    ]    
  ];
  return customZoomLevels;  
};

Once the custom zoom levels are defined, call this function inside the anychart.onDocumentReady() block. This ensures the zoom levels are patched before the chart is drawn.

chart.scale().zoomLevels(patchedZoomLevels());

One more important thing: don’t forget to disable the selection functionality to ensure click tracking works correctly for zooming.

chart.interactivity().selectionMode("none");

3.5.3. Add Zoom Control Buttons

Next, let’s add buttons to facilitate zooming into key periods of Roman history: the Kingdom, Republic, Empire, and Two Empires. First, set up the period buttons in the <body> section of the HTML page.

<button id="period-button" onclick="zoomTo('kingdom')">Roman Kingdom</button>
<button id="period-button" onclick="zoomTo('republic')">Roman Republic</button>
<button id="period-button" onclick="zoomTo('empire')">Roman Empire</button>
<button id="period-button" onclick="zoomTo('empires')">Two Empires</button>

Then, write JavaScript to make the period buttons functional, using zoomTo(period) to implement zooming into the target periods when buttons are clicked.

function zoomTo(period) {
  switch (period) {
    case "kingdom":
      chart.zoomTo(Date.UTC(-755), Date.UTC(-505));
      break
    case "republic":
      chart.zoomTo(Date.UTC(-515), Date.UTC(-20));
      break
    case "empire":
      chart.zoomTo(Date.UTC(-40), Date.UTC(410));
      break
    case "empires":
      chart.zoomTo(Date.UTC(380), Date.UTC(1460));
      break
  } 
};

Let’s also add a button to reset the zoom level to fit the entire timeline within the chart, using zoomOut() with the chart.fit() method.

<button id="zoom-out" onclick="zoomOut()">Zoom out</button>

function zoomOut() {
  chart.fit();  
};

3.6. Add Era Designators

In this step, we’ll introduce era designators into our timeline chart. They will be appended to the years to indicate the era. AnyChart uses locales to manage date and time formats, including era designations such as “BC” (Before Christ) and “AD” (Anno Domini) or “BCE” (Before Common Era) and “CE” (Common Era), depending on the locale. You can modify the locale’s format properties to include era designators through a custom function placed outside the anychart.onDocumentReady() function.

function patchDateTimeLocale(){
  // read the current output locale and create a structured clone of it
  var currentOutputLocale =  structuredClone(anychart.format.locales[anychart.format.outputLocale()]);
  // read the formats object to prepare for creating a custom version of the locale
  var dateTimeLocaleFormats = currentOutputLocale.dateTimeLocale.formats;
  // loop through all available format keys to find those related to the current scale
  for (var format in dateTimeLocaleFormats){
    // "timeline_" is the scale we are looking for
    if (format.startsWith("timeline_")){
      // read and loop through an array of format values to insert an era designator
      var formatValues = dateTimeLocaleFormats[format];
      for (var i = 0; i < formatValues.length; i++) {
        // formats are usually represented by strings like "yyyy" or "dd MMMM yy HH:mm.SSS"
        var formatValue = formatValues[i];
        // there are two possible configurations of year representation inside a locale string "yyyy" and "yy"
        // we need to find both versions or neither to correctly modify the locale string
        var index4Y = formatValue.search(/y{4}/g)
        var index2Y = formatValue.search(/y{2}/g)
        // if there is a string representing a "yyyy" year, modify the format to include an era designator
        if (index4Y >= 0) {
          /*
          Create a new string that includes everything before and after the index identified earlier.
          The new string will include an era designator, but ensure the indexes are adjusted correctly,
          as we want to insert the era designator after the part of the string that represents the year.
          */
          var formatValuePatched1 = formatValue.slice(0, index4Y) + "y G" + formatValue.slice(index4Y + 4);
          formatValues[i] = formatValuePatched1;
        // if there is a string representing a "yy" year, modify the format to include an era designator
        } else if (index2Y > -1) {
          var formatValuePatched2 = formatValue.slice(0, index2Y + 1) + "y G" + formatValue.slice(index2Y + 3)
          formatValues[i] = formatValuePatched2
        }
      }
    }
  }
  // add the custom current output locale to AnyChart
  anychart.format.locales["custom"] = currentOutputLocale;
  // set the custom locale as the active locale
  anychart.format.outputLocale("custom");
};

Once the locale patching function is set, call it in the anychart.onDocumentReady() block. Make sure to put it before rendering the chart, so the timeline properly displays the era designators.

patchDateTimeLocale();

3.7. Set Font for Axis Labels

We’ve already applied the Cinzel font to series labels and tooltips. To maintain consistent typography throughout the timeline, we'll also set the axis label font to match the overall design. Here’s how to set it:

chart.axis().labels().fontFamily("Cinzel");

3.8. Set Chart Title

A title helps users immediately understand what the chart represents. We can easily add a title using the chart.title() method:

chart.title({
  text: "Roman Civilization",
  fontFamily: "Cinzel",
  fontSize: 32
});

3.9. Set Container and Draw Chart

To display the chart, we need to link it to a container and then render it. The container is the <div> element with id="container" that we created in the HTML.

chart.container("container");

Finally, draw the chart.

chart.draw();

This command renders the entire timeline chart in the specified container on the page.

3.10. Complete JavaScript Timeline Code

Feel free to view the complete JavaScript code for the timeline chart on AnyChart Playground. There, you can also download the entire project as an HTML file or ZIP archive.

Step 4. CSS Styling

Before viewing the final result, remember that CSS is essential for ensuring our page appears exactly how we want it. Let’s apply CSS to style the entire web timeline visualization, making the project look clean, organized, and visually appealing.

4.1. Style HTML, Body, Container

The following CSS ensures that the webpage and the chart container take up the full screen while maintaining a consistent layout. The container is positioned absolutely to cover the available space, ensuring the chart adjusts to fit the window properly.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  position: absolute;
  min-width: 1000px;
  width: 100%;
  top: 40px;
  bottom: 0;
}

4.2. Style Zoom Control Buttons

The following CSS styles the zoom control buttons, which are used to zoom in (and out) on specific periods of Roman history. The buttons are styled to look consistent with the Roman theme, using the “Cinzel” font and a modern blue shade for hover effects.

#period-button, #zoom-out {
  background-color: #bad5f1;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: "Cinzel", serif;
  margin-top: 5px;
  margin-left: 5px;
}

#period-button:hover, #zoom-out:hover {
  color: #fff;
  background-color: #1976d2;
}

#zoom-out {
  position: absolute;
  right: 5px;
}

4.3. Style Tooltips

To make the tooltip content, including images and text, more visually appealing and legible, we apply styles to the images and paragraphs that appear inside the tooltips.

img {
  max-width: 300px;
  max-height: 300px;
}

p {
  font-family: "Cinzel", serif;
  margin-top: 1px;
  margin-bottom: 1px;
}

4.4. Complete CSS Code

Here’s the complete CSS code that styles the container, buttons, and tooltip content.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  position: absolute;
  min-width: 1000px;
  width: 100%;
  top: 40px;
  bottom: 0;
}

#period-button, #zoom-out {
  background-color: #bad5f1;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: "Cinzel", serif;
  margin-top: 5px;
  margin-left: 5px;
}

#period-button:hover, #zoom-out:hover {
  color: #fff;
  background-color: #1976d2;
}

#zoom-out {
  position: absolute;
  right: 5px;
}

img {
  max-width: 300px;
  max-height: 300px;
}

p {
  font-family: "Cinzel", serif;
  margin-top: 1px;
  margin-bottom: 1px;
}

Result: Timeline Chart of Roman History

After following all the steps, including setting up the environment, adding data, configuring the chart, and applying styling, we now have a fully functional, interactive Timeline Chart of Roman Civilization with zoom control, custom tooltips, and a visually consistent design. The timeline displays historical periods and events with detailed information, providing an immersive experience.

Check it out on AnyChart Playground with the full source code, where you can also tweak the settings, modify the data, and experiment with new features.

Wrapping Up

Congratulations! We’ve successfully created a detailed, interactive timeline chart of Roman history using JavaScript. We’ve walked through everything from setting up the HTML structure, data, tooltips, zoom controls, and more. Hopefully, the steps were clear, and you’re now ready to build your own timeline visualizations.

Explore more examples in our timeline chart gallery and dive into the timeline chart documentation to discover other customization options and possibilities.

Happy JavaScript timeline charting!

How to Create an OHLC Chart in JavaScript

andreykh — Mon, 20 Nov 2023 06:57:13 +0000

Unearthing insights from vast datasets is an intricate blend of art and science. In the realm of financial analysis, a pivotal instrument for visually exploring complex data is the Open-High-Low-Close (OHLC) chart. This tutorial is your roadmap to swiftly crafting your OHLC chart using JavaScript, a step-by-step journey. We'll harness S&P 500 data, and by the end of this article, you'll possess the skills to orchestrate visual stock analysis adeptly.

What Is OHLC Chart?

Before we embark on this data visualization odyssey, let's uncover the essence of the OHLC chart type. An OHLC chart — denoting Open, High, Low, Close — is a potent ally in financial data analysis and visualization. It can meticulously encapsulate stock price dynamics over chosen timeframes, be it a day, an hour, or any other. Here's the significance of each facet within an OHLC chart:

Open (O): The open price inaugurates the financial instrument's price journey within the selected timeframe. It typically manifests as a horizontal mark on the chart's left side.
High (H): The high price represents the zenith reached during the designated time frame, crowning the vertical line.
Low (L): The low price marks the nadir recorded in the same timeframe, visible at the line's lower extremity.
Close (C): The close price is the finale, signaling the financial instrument's value at the selected timeframe's closure. It is often depicted as a horizontal mark on the chart's right side.

In summary, each vertical line in an OHLC chart delineates the price range during a specific time segment. The line's height is dictated by the highest and lowest prices, while the left and right marks signify the opening and closing prices, respectively. OHLC charts serve as indispensable tools for traders and analysts to decipher price trends, gauge price volatility, and pinpoint vital support and resistance levels — making them an integral asset in financial data analysis.

OHLC Chart Example

Take a glance at an example of an OHLC chart below. Actually, it’s the very creation that awaits you at the end of this tutorial — your visual guide to financial storytelling.

Ready to unfurl the financial narrative through the art of OHLC chart development with JavaScript? Without further ado, let’s embark on this data visualization expedition!

A. Building Basic OHLC Chart with JavaScript

Creating an OHLC chart might initially seem complex, but fret not, even if you're new to this. I'm here to guide you through each essential step in crafting a clear and informative one. We can achieve this by following these four steps:

Create a basic web page in HTML
Include the required JavaScript files
Load the data
Write the OHLC charting code

1. Create a basic web page in HTML

To start, let’s create an HTML page for our JS OHLC chart. Adding a <div> element with the ID "container" will provide a place to display the graphic. We can adjust the appearance of the chart by applying CSS rules within the <style> block. Here, we set the width and height properties to 100%, and the margin and padding to 0.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
</body>
</html>

2. Include the required JavaScript files

Now that the basic HTML structure is in place, it's time to incorporate the JavaScript files necessary for creating our OHLC chart. We can add these to our project in two ways: by downloading and using them locally, or by linking to them through a Content Delivery Network (CDN). For this tutorial, let’s opt for the CDN approach, including links to the essential scripts in the <head> section of our HTML page. We'll use AnyChart JS Charts, and to create an OHLC chart, it’s necessary to include the Core and Stock modules, as well as the Data Adapter one, which will make it easy to load data from a file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    // The entire JS code for our OHLC chart visualization will be here.
  </script>
</body>
</html>

3. Load the data

Now, let's proceed with loading our data. As previously mentioned, we are going to visualize the S&P 500 data over time. This data is sourced from Yahoo Finance and organized in a CSV format, accessible on my GitHub gist. The CSV data contains six columns: Date, Open, High, Low, Close, and Volume, representing the date and corresponding price points for each date. To ensure the data integrates seamlessly into the OHLC view, we utilize the anychart.data.loadCsvFile() method powered by the Data Adapter script. Below is the code snippet we'll use.

anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {
  // The OHLC JS code lands here.
});

4. Write the OHLC charting code

Next, we’ll write a few lines of JavaScript code, and our OHLC chart will rise. To start, we employ the anychart.onDocumentReady() function, encapsulating all the code within it. This ensures that the code executes only after the page is fully loaded.

<script>
  anychart.onDocumentReady(function () {
    // The upcoming OHLC chart data and JS code will be in this section
  });
</script>

Then, we load data as explained in Step 3 and create a data table with this data.

anychart.onDocumentReady(function () {

  // load csv data
  anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {

    // create a data table
    var dataTable = anychart.data.table();
    dataTable.addData(data);

    // The upcoming OHLC JS charting code will be here

  });

});

As we map the columns from the data table into OHLC format, our data is completely ready.

var mapping = dataTable.mapAs({
  date: 0,
  open: 1,
  high: 2,
  low: 3,
  close: 4
});

Next, we create a stock chart instance, establish a chart plot, and add an OHLC series binding it with the mapped data.

// create a stock chart
var chart = anychart.stock();

// create the chart plot
var plot = chart.plot(0);

// create an ohlc series and bind it to the mapped data
var ohlcSeries = plot.ohlc(mapping);

While doing this, let’s also set the chart to display data within a specific time range, much like zooming into a particular timeframe on a timeline.

chart.selectRange("2021-03-01", "2023-08-20");

Finally, we name the chart, place it in the container created in Step 1, and render the resulting OHLC chart visualization.

// set the chart title
chart.title("S&P 500 OHLC Chart");

// set the container id for the chart
chart.container("container");

// initiate the chart drawing
chart.draw();

Tada! Our basic JavaScript-based OHLC chart is ready for exploration. You can find it on Playground. Additionally, for your convenience, the code is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    anychart.onDocumentReady(function () {
      // load csv data
      anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {
        // create a data table
        var dataTable = anychart.data.table();
        dataTable.addData(data);
        // map the columns from the data table into the ohlc format
        var mapping = dataTable.mapAs({
          date: 0,
          open: 1,
          high: 2,
          low: 3,
          close: 4
        });
        // create a stock chart
        var chart = anychart.stock();
        // create the chart plot
        var plot = chart.plot(0);
        // create an ohlc series and bind it to the mapped data
        var ohlcSeries = plot.ohlc(mapping);
        // set the date/time range displayed by default
        chart.selectRange("2021-03-01", "2023-08-20");
        // set the chart title
        chart.title("S&P 500 OHLC Chart");
        // set the container id for the chart
        chart.container("container");
        // initiate the chart drawing
        chart.draw();
      });
    });
  </script>
</body>
</html>

B. Customizing OHLC Chart

Now that our basic JS-based OHLC chart is in place, let's explore ways to enhance its visuals and functionality, making it more informative and visually appealing.

1. Color and outlook customization

A well-chosen color scheme can enhance the visual appeal and clarity of any chart. In this step, we'll tweak the default shades of the chart to infuse more vibrancy into it. First, let’s set the background color of the chart to a soothing light blueish-gray shade.

chart.background().fill("#edf4f5");

Additionally, we can customize the color of the lines, both in normal and different states.

// customize the color of the ohlc bars
ohlcSeries.fallingFill("#ff0d0d");
ohlcSeries.fallingStroke("#ff0d0d");
ohlcSeries.risingFill("#43ff43");
ohlcSeries.risingStroke("#43ff43");

// additional customization for the ohlc series
ohlcSeries.normal().risingStroke("#33ccff");
ohlcSeries.hovered().risingStroke("#33ccff", 1.5);
ohlcSeries.selected().risingStroke("#33ccff", 3);
ohlcSeries.normal().fallingStroke("#ff33cc");
ohlcSeries.hovered().fallingStroke("#ff33cc", 1.5);
ohlcSeries.selected().fallingStroke("#ff33cc", 3);

Also, let’s name the series “S&P” and customize the legend item for the OHLC series to display a rising-falling icon.

// name the ohlc series
ohlcSeries.name("S&P");

// customize the legend item for the ohlc series
// to display a rising/falling icon
ohlcSeries.legendItem().iconType("rising-falling");

2. Add Date Range Selection UI

While there is already a scroller at the bottom of the OHLC visualization to select the date range, we can still improve the navigation experience. Let’s add a date range picker and a range selector, enhancing the chart’s UI.

// create a date range picker
var rangePicker = anychart.ui.rangePicker();
rangePicker.render(chart);

// create a date range selector
var rangeSelector = anychart.ui.rangeSelector();
rangeSelector.render(chart);

3. Integrate event markers

World affairs and events play a significant role in stock market prices, so it can make sense to highlight specific dates and mark these events directly within the OHLC chart. Below is how we can add event markers precisely, with data points for individual events, including symbols, dates, descriptions, and styling attributes for normal, hovered, and selected states.

// add event markers
plot.eventMarkers({
  "groups": [
    {
      "data": [
        {
          "symbol": "1",
          "date": "2020-03-11",
          "description": "The WHO declares COVID-19 a global pandemic",
          "normal": {
            "type": "rect", "width": 40,
            "fill": "#ead9d1", "stroke": "2 #990033",
            "fontColor": "#990033", "fontWeight": 600,
            "connector": { "stroke": "2 #990033" }
          }
        },
        {
          "symbol": "2",
          "date": "2021-03-08",
          "description": "The first COVID-19 vaccine is approved for use in the U.S.",
          "normal": {
            "type": "circle",
            "fill": "#d1ead9", "stroke": "2 #009933",
            "fontColor": "#009933", "fontWeight": 600,
            "connector": { "stroke": "2 #009933" }
          }
        },
        {
          "symbol": "3",
          "date": "2022-02-24",
          "description": "Russia starts a military operation in Ukraine",
          "normal": {
            "type": "rect", "width": 40,
            "fill": "#ead9d1", "stroke": "2 #990033",
            "fontColor": "#990033", "fontWeight": 600,
            "connector": { "stroke": "2 #990033" }
          }
        },
        {
          "symbol": "4",
          "date": "2023-05-03",
          "description": "The Federal Reserve announces a rate hike to combat inflation, exceeding 5%",
          "normal": {
            "type": "circle",
            "fill": "#d1ead9", "stroke": "2 #009933",
            "fontColor": "#009933", "fontWeight": 600,
            "connector": { "stroke": "2 #009933" }
          },
          "hovered": {
            "fill": "white", "stroke": "2 #990033",
            "fontColor": "#990033",
            "connector": { "stroke": "2 #990033" }
          },
          "selected": {
            "fill": "white", "stroke": "2 #4d1a00",
            "fontColor": "#4d1a00",
            "connector": { "stroke": "2 #4d1a00" }
          }
        },
      ]
    }
  ]
});

// set the event marker symbol
plot.eventMarkers().format(function () {
  return this.getData("symbol");
});

4. Add annotations

Annotations can be greatly helpful in providing additional context, emphasizing specific points or areas to enhance data interpretation. They are particularly useful for explaining trends or outliers, making charts more insightful and easier to understand. To add annotations, start by creating an annotation object.

var annotation = plot.annotations();

Next, let’s create a rectangle annotation with specified coordinates, stroke, and fill properties. The rectangle will mark a particular area on the plot between two dates and two values, with defined stroke and fill colors.

annotation.rectangle({
  xAnchor: "2022-02-24",
  valueAnchor: 3491,
  secondXAnchor: "2022-06-04",
  secondValueAnchor: 4637,
  stroke: "3 #e65a37",
  fill: "#e65a37 0.25"
});

Following this, we create a text label annotation to provide additional information.

annotation.label()
  .xAnchor("2022-02-24")
  .valueAnchor(4900)
  .anchor("left-top")
  .offsetY(5)
  .padding(6)
  .text("First 100 days since Ukraine was attacked")
  .fontColor("#fff")
  .background({
    fill: "#e65a37 0.75",
    stroke: "0.5 #2d2d2d",
    corners: 2
});

5. Add KDJ indicator

In the realm of technical analysis, numerous indicators aid in the evaluation of stock trends. Let's explore how to integrate the KDJ indicator, a popular tool for analyzing and predicting stock trends, helping identify potential buy and sell signals. To begin, we create a new plot specifically for displaying the KDJ indicator.

var kdjPlot = chart.plot(1);

To calculate the KDJ indicator, we need specific data points, typically high, low, and closing prices. We map these data points from the original data table to use with the KDJ indicator.

var kdjMapping = dataTable.mapAs({
  high: 2,
  low: 3,
  close: 4
});

We then create the KDJ indicator itself, specifying the mapping and the default periods for %K, %D, and %J.

var kdj = kdjPlot.kdj(kdjMapping, 14, 3, 3);
// (default values: 14 periods for %k, 3 periods for %d, 3 periods for %j)
kdj.kSeries().stroke("purple"); // customize the %k line color
kdj.dSeries().stroke("green");  // customize the %d line color
kdj.jSeries().stroke("orange"); // customize the %j line color

To ensure the KDJ plot is displayed appropriately, we can set its height.

kdjPlot.height("20%");

6. Display volume data in the scroller

The scroller is enabled by default at the bottom of an OHLC stock chart and is used for navigation through time. It’s possible to incorporate a series into it to enhance its functionality. For instance, let’s supply the scroller with a series representing volume data. We first map the volume data to the scroller.

var volumeMapping = dataTable.mapAs({
  "value": 5
});

Then we integrate the volume data into the scroller, making it appear as a line series.

chart.scroller().line(volumeMapping);

Our final JavaScript (HTML5) OHLC chart is complete after all these steps! Feel free to check it out with the full code below, as well as on Playground where you can make further changes as needed and continue experimenting with various other features (get inspired by the stock chart gallery and the stock chart documentation).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript OHLC Chart</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    anychart.onDocumentReady(function () {
      // load csv data
      anychart.data.loadCsvFile("https://gist.githubusercontent.com/awanshrestha/f234904bcc41b38dc3e6cb98ee563777/raw/c033b77d9ae698b322a6446befee4a7ed88be10e/SandP500Final.csv", function (data) {
        // create a data table
        var dataTable = anychart.data.table();
        dataTable.addData(data);
        // map the columns from the data table into the ohlc format
        var mapping = dataTable.mapAs({
          date: 0,
          open: 1,
          high: 2,
          low: 3,
          close: 4
        });
        // add the volume data mapping
        var volumeMapping = dataTable.mapAs({
          "value": 5
        });
        // create a stock chart
        var chart = anychart.stock();
        // create the chart plot
        var plot = chart.plot(0);
        // create an ohlc series and bind it to the mapped data
        var ohlcSeries = plot.ohlc(mapping);
        // set the chart background color
        chart.background().fill("#edf4f5");
        // add the volume data as the scroller series
        chart.scroller().line(volumeMapping);
        // customize the color of the ohlc bars
        ohlcSeries.fallingFill("#ff0d0d");
        ohlcSeries.fallingStroke("#ff0d0d");
        ohlcSeries.risingFill("#43ff43");
        ohlcSeries.risingStroke("#43ff43");
        // additional customization for the ohlc series
        ohlcSeries.normal().risingStroke("#33ccff");
        ohlcSeries.hovered().risingStroke("#33ccff", 1.5);
        ohlcSeries.selected().risingStroke("#33ccff", 3);
        ohlcSeries.normal().fallingStroke("#ff33cc");
        ohlcSeries.hovered().fallingStroke("#ff33cc", 1.5);
        ohlcSeries.selected().fallingStroke("#ff33cc", 3);
        // name the ohlc series
        ohlcSeries.name("S&P");
        // customize the legend item for the ohlc series
        // to display a rising/falling icon
        ohlcSeries.legendItem().iconType("rising-falling");
        // create a date range picker
        var rangePicker = anychart.ui.rangePicker();
        rangePicker.render(chart);
        // create a date range selector
        var rangeSelector = anychart.ui.rangeSelector();
        rangeSelector.render(chart);
        // add event markers
        plot.eventMarkers({
          "groups": [
            {
              "data": [
                {
                  "symbol": "1",
                  "date": "2020-03-11",
                  "description": "The WHO declares COVID-19 a global pandemic",
                  "normal": {
                    "type": "rect", "width": 40,
                    "fill": "#ead9d1", "stroke": "2 #990033",
                    "fontColor": "#990033", "fontWeight": 600,
                    "connector": { "stroke": "2 #990033" }
                  }
                },
                {
                  "symbol": "2",
                  "date": "2021-03-08",
                  "description": "The first COVID-19 vaccine is approved for use in the U.S.",
                  "normal": {
                    "type": "circle",
                    "fill": "#d1ead9", "stroke": "2 #009933",
                    "fontColor": "#009933", "fontWeight": 600,
                    "connector": { "stroke": "2 #009933" }
                  }
                },
                {
                  "symbol": "3",
                  "date": "2022-02-24",
                  "description": "Russia starts a military operation in Ukraine",
                  "normal": {
                    "type": "rect", "width": 40,
                    "fill": "#ead9d1", "stroke": "2 #990033",
                    "fontColor": "#990033", "fontWeight": 600,
                    "connector": { "stroke": "2 #990033" }
                  }
                },
                {
                  "symbol": "4",
                  "date": "2023-05-03",
                  "description": "The Federal Reserve announces a rate hike to combat inflation, exceeding 5%",
                  "normal": {
                    "type": "circle",
                    "fill": "#d1ead9", "stroke": "2 #009933",
                    "fontColor": "#009933", "fontWeight": 600,
                    "connector": { "stroke": "2 #009933" }
                  },
                  "hovered": {
                    "fill": "white", "stroke": "2 #990033",
                    "fontColor": "#990033",
                    "connector": { "stroke": "2 #990033" }
                  },
                  "selected": {
                    "fill": "white", "stroke": "2 #4d1a00",
                    "fontColor": "#4d1a00",
                    "connector": { "stroke": "2 #4d1a00" }
                  }
                },
              ]
            }
          ]
        });
        // set the event marker symbol
        plot.eventMarkers().format(function () {
          return this.getData("symbol");
        });
        // create annotations
        var annotation = plot.annotations();
        // create a rectangle annotation
        annotation.rectangle({
          xAnchor: "2022-02-24",
          valueAnchor: 3491,
          secondXAnchor: "2022-06-04",
          secondValueAnchor: 4637,
          stroke: "3 #e65a37",
          fill: "#e65a37 0.25"
        });
        // create a text label annotation
        annotation.label()
          .xAnchor("2022-02-24")
          .valueAnchor(4900)
          .anchor("left-top")
          .offsetY(5)
          .padding(6)
          .text("First 100 days since Ukraine was attacked")
          .fontColor("#fff")
          .background({
            fill: "#e65a37 0.75",
            stroke: "0.5 #2d2d2d",
            corners: 2
          });
        // create a kdj indicator plot
        var kdjPlot = chart.plot(1);
        // map the necessary data for the kdj calculation
        var kdjMapping = dataTable.mapAs({
          high: 2,
          low: 3,
          close: 4
        });
        // create a kdj indicator
        var kdj = kdjPlot.kdj(kdjMapping, 14, 3, 3);
        // (default values: 14 periods for %k, 3 periods for %d, 3 periods for %j)
        kdj.kSeries().stroke("purple"); // customize the %k line color
        kdj.dSeries().stroke("green");  // customize the %d line color
        kdj.jSeries().stroke("orange"); // customize the %j line color
        // set the kdj plot's height
        kdjPlot.height("20%");
        // set the date/time range displayed by default
        chart.selectRange("2021-03-01", "2023-08-20");
        // set the chart title
        chart.title("S&P 500 OHLC Chart");
        // set the container id for the chart
        chart.container("container");
        // initiate the chart drawing
        chart.draw();
      });
    });
  </script>
</body>
</html>

Conclusion

Delving into the world of OHLC charts might have appeared daunting initially, but in just a few minutes, we’ve created a stunning one using JavaScript. I hope this tutorial has been enlightening and enjoyable, and that it has equipped you with the skills to create and customize interactive OHLC charts for your specific needs. The stage is now set for you to explore and tailor these charts further to align with your distinct requirements. If you ever find yourself in need of assistance or have any questions, don't hesitate to reach out. I'm here to help you on your charting journey. Happy charting!

Check out more JavaScript charting tutorials.

Got a guest post idea? Let’s make it work!

Nobel Laureates’ Countries, or Creating a Word Cloud with JS

andreykh — Fri, 13 Oct 2023 14:06:16 +0000

The Nobel Prize 2023 announcements are just around the corner, scheduled from October 2 to 9. Recently, I stumbled upon this news, sparking my interest in Nobel laureates and their countries of origin.

This curiosity led me to the comprehensive list of Nobel Prize winners on Britannica, which I transformed into an interactive tag cloud (or word cloud) using JavaScript, providing an elegant means to explore and uncover the countries with the highest number of Nobel laureates throughout history.

During this process, it dawned on me that this visualization could serve as an excellent illustrative example for a tutorial on creating interactive JS-based tag clouds. So, if you share my curiosity about Nobel laureates by country, you're in for a treat right below! and if you're eager to learn how I brought this tag cloud to life — and, therefore, how you can create your own — read on!

B. Customizing JS Tag Cloud

After getting that basic JavaScript tag cloud, I decided to add some customizations to improve the chart’s view.

1. Modifying the Font

First, I changed the font. For the title customization, I used HTML.

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style="font-size: 20px;">Nobel Laureates by Country</span>'
  );

I also adjusted the tags.

chart
  .normal()
  .fontWeight(600)
  .fontVariant('small-caps');

2. Changing the Angle

Second, I changed the way the tags are oriented by setting the angle to zero to make them all displayed horizontally.

chart.angles([0]);

3. Improving the Visual Appearance

Third, I changed the colors and added a color range. I created a color scale using the anychart.scales.ordinalColor() function and passed an array of colors to it. Then I set the color scale to the tag cloud chart and added a color range.

// create and configure a color scale
let customColorScale = anychart.scales.ordinalColor();
customColorScale.colors(['#077fe8', '#1c9447', '#970fff',  '#c47900', '#e80707','#323238']);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// get the color range
let colorRange = chart.colorRange();
// enable the color range
colorRange
  .enabled(true)
  .colorLineSize(15);

4. Enhancing the Tooltip

Fourth, I improved the tooltip, a hint that shows up when you hover over the words in an interactive tag cloud. I accessed the tooltip() function and used the format() function to change the tooltip content.

chart
  .tooltip()
  .format('Total Nobel Laureates: {%value}\n Continent: {%category}');

5. Adding interactivity With Link Opening

Finally, I decided to add an event listener so that a new page opens up to provide more information when a country is clicked. I used the listen() function to "listen" when one clicks on a country’s tag. When I could access the URL property in the data array and add the window.open() function to open the web page with that URL. I also passed the _blank property to make the URL open in a new tab.

chart.listen("pointClick", function(e){
  var url = e.point.get("url").toString();
  window.open(url, "_blank");
});

After all these customizations, I ended up getting a cool, interactive, JavaScript-based tag cloud demonstrated below.

It's the final version of the tag cloud I was satisfied with. Check it out with the full source code on CodePen [and on Playground] and feel free to play around with colors, interactivity, and so on — use all your creativity, and I am sure you will enjoy the process. For your convenience, I am also putting the final JS tag cloud code below.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Tag Cloud</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-tag-cloud.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add data
        var data = [
          { "x": "Alsace", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Austria", "value": 12, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Austria-Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Australia", "value": 8, "category": "Australia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Australia"},
          { "x": "Argentina", "value": 5, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Argentina"},
          { "x": "Bangladesh", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bangladesh"},
          { "x": "Belarus", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belarus"},
          { "x": "Belgium", "value": 9, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belgium"},
          { "x": "Bulgaria", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bulgaria"},
          { "x": "Canada", "value": 15, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Canada"},
          { "x": "Chile", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Chile"},
          { "x": "China", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#China,_(People's_Republic_of_China)"},
          { "x": "Colombia", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Colombia"},
          { "x": "Costa Rica", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Costa_Rica"},
          { "x": "Cyprus", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Cyprus"},
          { "x": "Czechoslovakia", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Czech_Republic"},
          { "x": "Democratic Republic of the Congo", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Congo,_Democratic_Republic"},
          { "x": "Denmark", "value": 13, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Denmark"},
          { "x": "Egypt", "value": 4, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Egypt"},
          { "x": "Ethiopia", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ethiopia"},
          { "x": "Finland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Finland"},
          { "x": "France", "value": 60, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#France"},
          { "x": "Germany", "value": 61, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Ghana", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ghana"},
          { "x": "Greece", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Greece"},
          { "x": "Guatemala", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Guatemala"},
          { "x": "Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Hungary"},
          { "x": "Iceland", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iceland"},
          { "x": "India", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#India"},
          { "x": "Iran", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iran"},
          { "x": "Iraq", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iraq"},
          { "x": "Ireland", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Israel", "value": 13, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Israel"},
          { "x": "Italy", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Italy"},
          { "x": "Japan", "value": 25, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Japan"},
          { "x": "Kenya", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Kenya"},
          { "x": "Liberia", "value": 2, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Liberia"},
          { "x": "Luxembourg", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Luxembourg"},
          { "x": "Mexico", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Mexico"},
          { "x": "Myanmar", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Myanmar"},
          { "x": "Netherlands", "value": 19, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Netherlands"},
          { "x": "Nigeria", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Nigeria"},
          { "x": "Norway", "value": 11, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Norway"},
          { "x": "Northern Ireland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Pakistan", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Pakistan"},    
          { "x": "Peru", "value": 1, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Peru"},
          { "x": "Philippines", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Philippines"},
          { "x": "Poland", "value": 5, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Poland"},
          { "x": "Portugal", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Portugal"},
          { "x": "Russia", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Spain", "value": 6, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Spain"},
          { "x": "South Africa", "value": 7, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Africa"},
          { "x": "South Korea", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Korea"},
          { "x": "St. Lucia", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Saint_Lucia"},
          { "x": "Sweden", "value": 34, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Sweden"},
          { "x": "Switzerland", "value": 24, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Switzerland"},
          { "x": "Tanzania", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tanzania"},
          { "x": "Tibet", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tibet"},
          { "x": "Timorese", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#East_Timor"},
          { "x": "Trinidad", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Trinidad_and_Tobago"},
          { "x": "Turkey", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Turkey"},
          { "x": "Ukraine", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ukraine"},
          { "x": "United Kingdom", "value": 119, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_Kingdom"},
          { "x": "United States", "value": 393, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_States"},
          { "x": "U.S.S.R.", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Vietnam", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Vietnam"},
          { "x": "West Germany", "value": 23, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Yemen", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yemen"},
          { "x": "Yugoslavia", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yugoslavia"}
        ];
        // create a tag cloud with the added data
        var chart = anychart.tagCloud(data);
        // set the chart title
        chart.title("Nobel Laureates by Country");
        // set the container element id
        chart.container("container");
        // initiate the drawing of the chart
        chart.draw();
      });
    </script>
  </body>
</html>

Conclusion

Well, this is how I created my tag cloud using JavaScript (HTML5), displaying the statistics of the Nobel laureates by country. I hope my stepwise tutorial will help you quickly get your own charts of this type up and running. Leave your questions in the comments, if any, and I would love to check out your tag clouds.

Published with the permission of Awan Shrestha. Originally appeared on HackerNoon with the title "Nobel Laureates by Country - Or Creating a Tag Cloud With JavaScript" on October 2, 2023.

You may also like to read the JavaScript World Cloud Tutorial originally published on the AnyChart blog earlier, visualizing the most popular languages worldwide.

Check out more JavaScript charting tutorials and continue mastering interactive data visualization.

How to Create a Pie Chart in JavaScript: IPL Winnership

andreykh — Sat, 30 Sep 2023 12:46:26 +0000

The pie chart, a widely used chart type yet also a topic of debate here and there, has cemented its place in the realm of data visualization. When used appropriately, it provides an intuitive insight into the composition of data, with each slice of the pie representing a distinct component. In this tutorial, I'll guide you through a straightforward path of creating interactive pie charts using JavaScript.

Every chart begins with data. To demonstrate the concepts in this tutorial, I decided to visualize the composition of the Indian Premier League (IPL) winnership over its 16-season history.

Whether you're a novice or an experienced coder, get ready to immediately acquire the valuable skills of crafting visually appealing JS-based pie charts from scratch.

Steps to Create a JS Pie Chart

The toss is done, and it's time to step onto the field. Come along as I guide you through crafting a functional, interactive pie chart with JavaScript in just four straightforward steps.

1. Setting the stage

Before we dive into code, let's prepare our canvas. Every chart needs a container, so we'll start by creating a simple HTML page. Within it, we'll define a container element with a unique ID to host our pie chart. If you want the chart to fill the entire page, set the container's width and height parameters in CSS to 100%.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
        } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Gathering tools

Building a JavaScript pie graph from scratch can be a daunting task, but we're in luck! There are plenty of JS charting libraries that provide pre-built functions and features, making data visualization development seamless. For this tutorial, I’ve chosen the AnyChart JS library, suitable for beginners and experts alike, but feel free to use your favorite one as the logic of the process will be the same.

We'll connect the necessary library files from a content delivery network (CDN). These scripts will reside in the <head> section of our HTML page, setting the stage for our pie chart. The JavaScript code itself will be placed between the <script> and </script> tags, which can be added to either the <head> or the <body> sections.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS Pie Chart will come here
    </script>
  </body>
</html>

3. Adding data

Charts rely on data, and we've got options for how to incorporate it. In this tutorial, we'll manually input the data directly into our JavaScript charting code. However, keep in mind that you can, of course, also fetch data from databases or files.

let data = anychart.data.set([
  ["Chennai Super Kings", 5],
  ["Mumbai Indians", 5],
  ["Kolkatta Knight Riders", 2],
  ["Deccan Chargers", 1],
  ["Gujarat Titans", 1],
  ["Rajasthan Royal", 1],
  ["Sunrisers Hyderabad", 1],
]);

4. Writing a JavaScript charting code

Now, let's transition from scoring singles to hitting those thrilling fours and sixes. You'll see how just a few lines of code can create an interactive JS pie chart in no time.

Firstly, to ensure everything runs smoothly, we enclose all our code within a function. This guarantees that our chart-building process only begins after the page has fully loaded. The data goes directly there as the first ball.

anychart.onDocumentReady(function () {
  // add the data
  let data = anychart.data.set([
    ["Chennai Super Kings", 5],
    ["Mumbai Indians", 5],
    ["Kolkatta Knight Riders", 2],
    ["Deccan Chargers", 1],
    ["Gujarat Titans", 1],
    ["Rajasthan Royal", 1],
    ["Sunrisers Hyderabad", 1]
  ]);
  // The upcoming JS code goes here...
});

Now, for the game-changing moment — we create a pie chart instance with a single line of code.

let chart = anychart.pie(data);

To provide context to our pie graphic and help viewers understand its purpose, let’s add a descriptive title.

chart.title("IPL Winnership Over 16 Seasons");

Lastly, we refer to the HTML element designated earlier as the chart container and, with a simple command, draw the resulting pie chart.

chart.container("container");
chart.draw();

And there you have it! A nice chart that vividly visualizes the composition of the IPL winnership over the entire span of 16 seasons. You'll notice that the top two teams dominate, accounting for almost two-thirds of all IPL titles during this period. Feel free to explore the initial version here with the code; the complete HTML/CSS/JS code is also below.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add the data
        let data = anychart.data.set([
          ["Chennai Super Kings", 5],
          ["Mumbai Indians", 5],
          ["Kolkatta Knight Riders", 2],
          ["Deccan Chargers", 1],
          ["Gujarat Titans", 1],
          ["Rajasthan Royal", 1],
          ["Sunrisers Hyderabad", 1],
        ]);
        // create a pie chart with the data
        let chart = anychart.pie(data);
        // set the chart title
        chart.title("IPL Winnership Over 16 Seasons");
        // set container id for the chart
        chart.container("container");
        // initiate chart drawing
        chart.draw();
      });
    </script>
  </body>
</html>

Some Options to Customize a Pie Chart

Now that we've created a basic JS pie chart, let's delve into possible ways of customizing it to elevate its visual appeal.

1. Modify the color palette

A smart way to enhance a chart is by using colors that are relevant to the data it represents. In our case, since we're plotting IPL teams, why not incorporate the primary colors from each team's logo?

To achieve this, we'll create a customized color palette and apply it to the initial pie chart.

// create a custom palette
let palette = anychart.palettes.distinctColors();
// set the colors according to the team brands
palette.items([
  {color: "#004f91"},
  {color: "#fcce06"},
  {color: "#3a225d"},
  {color: "#9a1c22"},
  {color: "#254aa5"},
  {color: "#D9E3EF"},
  {color: "#02183c"}
]);
// set the palette to the chart
chart.palette(palette);

2. Format the labels and disable the legend

Let's enhance the readability of the pie chart by improving the labels on the slices. We can display information about both the team and the number of titles won in an explicit manner.

Using abbreviations instead of full team names can be a wise choice to maintain chart conciseness and visual appeal. So, first, we’ll incorporate the abbreviations into the data.

// add the data
let data = anychart.data.set([
  ["Chennai Super Kings", 5, "CSK"],
  ["Mumbai Indians", 5, "MI"],
  ["Kolkatta Knight Riders", 2, "KKR"],
  ["Deccan Chargers", 1, "DC"],
  ["Gujarat Titans", 1, "GT"],
  ["Rajasthan Royal", 1, "RR"],
  ["Sunrisers Hyderabad", 1, "SRH"]
]);
// create a pie chart with the data, naming the values in the dataset
let chart = anychart.pie(data.mapAs({name: 0, value: 1, abbr: 2}));

Next, we'll proceed to configure the labels themselves. Our goal is to format them, displaying the team abbreviation alongside the number of titles won. Additionally, we'll specify a font size larger than the default to ensure the labels have a more pronounced visual impact. To guarantee that all labels, including those exceeding the pie slice boundaries, remain easily visible, we'll position them outside the chart; adjusting the label position to "outside" ensures each label is automatically linked to its corresponding slice with a connecting line.

chart
  .labels()
  .format("{%abbr} — {%value}")
  .fontSize(14)
  .position("outside");

Since all labels are now readily visible, let’s disable the legend to avoid redundancy.

chart.legend(false);

3. Improve the tooltip

Using a tooltip is an effective approach to providing additional information within a chart. While our pie visualization already presents the necessary information, we can further enhance it by modifying the tooltip using the format() function.

chart
  .tooltip()
  .format("Percent of total wins: {%PercentValue}{decimalsCount: 1}%");

4. Enhance the chart title

A title can be an important element that complements a data graphic. For example, let’s customize the pie chart’s one and include a subtitle to highlight the main takeaway.

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style = "color: #111; font-size:20px; margin-bottom:10px; dy:20px">IPL Winnership Over 16 Seasons</span>' +
      '<br/><span style="color:#173685; font-size: 15px;">Among the 10 current IPL teams, 2 dominate, and 3 have never won the title</span>'
  );

Observe the sophisticated and refined appearance of the JavaScript pie chart now! You can access the interactive version along with the code for this tutorial’s final chart here; the complete HTML/CSS/JS code is also below.

<html>
  <head>
    <title>Pie Chart in JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pie.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add the data
        let data = anychart.data.set([
          ["Chennai Super Kings", 5, "CSK"],
          ["Mumbai Indians", 5, "MI"],
          ["Kolkatta Knight Riders", 2, "KKR"],
          ["Deccan Chargers", 1, "DC"],
          ["Gujarat Titans", 1, "GT"],
          ["Rajasthan Royal", 1, "RR"],
          ["Sunrisers Hyderabad", 1, "SRH"]
        ]);
        // create a pie chart with the data, naming the values in the dataset
        let chart = anychart.pie(data.mapAs({name: 0, value: 1, abbr: 2}));
        // create a custom palette
        let palette = anychart.palettes.distinctColors();
        // set the colors according to the team brands
        palette.items([
          {color: "#004f91"},
          {color: "#fcce06"},
          {color: "#3a225d"},
          {color: "#9a1c22"},
          {color: "#254aa5"},
          {color: "#D9E3EF"},
          {color: "#02183c"}
        ]);
        // set the palette to the chart
        chart.palette(palette);
        // configure the labels
        chart
          .labels()
          .format("{%abbr} — {%value}")
          .fontSize(14)
          .position("outside");
        // disable the chart legend
        chart.legend(false);
        // format the tooltip
        chart
          .tooltip()
          .format("Percent of total wins: {%PercentValue}{decimalsCount: 1}%");
        // set chart title text settings
        chart
          .title()
          .enabled(true)
          .useHtml(true)
          .text(
            '<span style = "color: #111; font-size:20px; margin-bottom:10px; dy:20px">IPL Winnership Over 16 Seasons</span>' +
              '<br/><span style="color:#173685; font-size: 15px;">Among the 10 current IPL teams, 2 dominate, and 3 have never won the title</span>'
          );
        // set container id for the chart
        chart.container("container");
        // initiate chart drawing
        chart.draw();
      });
    </script>
  </body>
</html>

Conclusion

Wrapping up, I hope this JS pie charting tutorial will be helpful to you. Feel free to adapt what you've learned here to your projects and datasets. Should you have any questions or innovative ideas, don't hesitate to get in touch.

Creating engaging charts can be as captivating as watching IPL matches. Start your visualization journey and tell compelling data stories.

Building a Bubble Chart (JS): Top 30 Most-Liked YouTube Videos

andreykh — Wed, 02 Aug 2023 16:24:38 +0000

Do you want to turn that data chaos into a comprehensible data show? Look no further than data visualization! And let me tell you, one chart to rule them all is the bubble chart. It's like blowing bubbles at your data and watching them pop into understanding! And the best part? With JavaScript, you can easily create an interactive bubble chart, and I will show you how!

Bubble charts are versatile data visualizations that display data points in the form of bubbles, where the bubbles' size, color, and position represent different variables. In this tutorial, I'll walk you through building these graphics step by step, making the process a breeze. For illustration, we'll take data on the popularity of various YouTube videos and use JavaScript to create an interactive bubble chart showcasing the top 30 most-liked videos of all time, categorized by year of release, views, and likes.

By the end of this tutorial, you'll be able to create visually-stunning JS-based bubble charts without any hassle. So let's dive into the world of data bubbles and turn numbers into a visual feast for the eyes!

Bubble Chart That Will Be Created

Take a quick look at the JS bubble chart we will build together in this tutorial, and follow along!

A. Creating a Basic JS Bubble Chart

Don't be intimidated if you're new to creating JS charts — it's easier than you might think! In fact, all you need to do is follow these four steps to make it happen:

Create a web page in HTML.
Include the required JavaScript files.
Add the data.
Write some JS charting code

1. Create a web page in HTML

The first step is a breeze — just create a basic HTML web page! From there, we'll add a <div> element and give it a unique ID like "container” to create the space for the bubble chart. To ensure that the graph takes up the entire page, we’ll use CSS code within the <style> tag to set the width and height to 100%; of course, this can be completely customized to fit your exact needs and preferences.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Bubble Chart</title>
    <style type="text/css">     
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Include the required JavaScript files

After setting up a basic HTML page, the next step is to include the necessary JavaScript files in the <head> section. There are numerous charting libraries available. In this tutorial, we'll be using AnyChart. This library supports bubble charts and offers comprehensive documentation. But no matter which library you choose, the basic steps for creating a chart are similar.

To create a bubble chart, we’ll use the Base module. The data will be in a JSON file, so we’ll need the Data Adapter module to load it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Bubble Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">     
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // All the code for the bubble chart will come here.
    </script>
  </body>
</html>

3. Add the data

I compiled the data about the top 30 most liked YouTube videos from BuzzGuru and YouTube and saved it in a JSON file, which you can find here.

In each object in the dataset represents a YouTube video and is to be visualized as one bubble. The objects have five properties: "x" for the year of upload to YouTube, "value" for the number of YouTube views, "size" for the number of YouTube likes, as well as "title" and "genre".

To load the data into a bubble plot, we’ll use the anychart.data.loadJsonFile() function.

anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
function (data) {});

You will find out where to put this code in a few moments.

4. Write some JS charting code

It’s time for a few lines of JavaScript code that will construct the visualization!

To begin, wrap the code in an anychart.onDocumentReady() function ensures that it only executes once the page is fully loaded.

<script>
  anychart.onDocumentReady(function () {
    // The bubble chart data and code will be in this section.
  });
</script>

Add the data from Step 3.

<script>
  anychart.onDocumentReady(function () {
    anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
    function (data) {
      // The upcoming JS code will be here.
    });
  });
</script>

Pass the data to the anychart.bubble() function to create a bubble chart object.

chart = anychart.bubble(data);

It's possible to set the minimum and maximum bubble size using the minBubblesize() and maxBubblesize() functions respectively.

chart.minBubbleSize("3%");
chart.maxBubbleSize("12%");

Finally, let’s give the bubble chart a title and insert it into the designated <div> container. Once this is done, we can use the draw() function to render the visualization on the web page.

chart.title("Top 30 Most Liked YouTube Videos");
chart.container("container");
chart.draw();

It's here! Our first JavaScript bubble chart is ready. Its interactive version with the full code can be found on Playground. The code is also provided below for your convenience.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Bubble Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">     
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function() {
        // load data
        anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/8df51b9b1c44b2d1bd3ebeb0757b5fb0/raw/28ee08902d393e02278a7ef7e3461b33e34c6c90/Top-liked-YouTube-Videos.json",
        function (data) {
          // create a bubble chart    
          chart =  anychart.bubble(data);   
          // set the minimum and maximum bubble sizes
          chart.minBubbleSize("3%");
          chart.maxBubbleSize("12%");
          // add a chart title
          chart.title("Top 30 Most Liked YouTube Videos");
          // set the container
          chart.container("container");
          // initiate the chart drawing
          chart.draw();
        })
      });
    </script>
  </body>
</html>

B. Customizing JS Bubble Chart

Let's take our JavaScript bubble chart to the next level by adding some exciting customizations that will make it look even more visually appealing! We can transform our chart from good to great with just a few tweaks. Let's do it!

Name the axes
Arrange the ticks
Enable the grid
Paint the bubbles by genre
Prevent clipping
Add the legend
Enhance the tooltip

FOR A WALKTHROUGH OF THESE JS BUBBLE CHART CUSTOMIZATIONS, CONTINUE READING THE TUTORIAL HERE.

📊 How to Create Pareto Charts in JavaScript 📈

andreykh — Wed, 12 Jul 2023 12:45:57 +0000

Welcome to this step-by-step tutorial that will empower you to create an interactive Pareto chart using JavaScript that will look nice on any device and in any browser! A Pareto chart is a captivating graphical combo representation that showcases individual values through descending bars, while a line graph illustrates the cumulative total. It is a powerful tool highlighting the relative importance of different categories within a dataset. Named after the visionary economist Vilfredo Pareto, the Pareto chart embodies the Pareto principle, also known as the 80/20 rule. This principle reveals that approximately 80% of effects stem from a mere 20% of causes. With their ability to pinpoint the most significant elements driving a specific scenario, Pareto charts have become indispensable in certain areas of data analysis. Every chart needs data, and for this tutorial, I have chosen a dataset to serve as an example for illustration. Together, we will embark on a journey to visualize the major customer complaints for consumer loans in a Pareto chart, demonstrating how easily you can achieve it at every step. So get ready, and let's dive into the world of Pareto charts and create our own interactive masterpiece!

Pareto Chart to Be Created

Take a moment to behold the final Pareto chart that awaits us.

Now, let's dive into the tutorial and follow the steps to learn how to create your own interactive JS Pareto chart without any complaints.

Creating a Pareto Chart

Developing a fully functional Pareto chart is an uncomplicated task that can be completed in four steps. While having an understanding of HTML and JavaScript can be beneficial, it is optional when utilizing a decent JavaScript charting library. The basic steps are as follows:

Create an HTML container.
Incorporate the required scripts.
Input the data you want to visualize.
Configure the visualization using JavaScript.

1. Create an HTML container

To house a chart, you'll need a container. Start by crafting an HTML page that features a block-level element with a unique identifier for easy referencing. To ensure the chart fills the entire page, set the width and height parameters to 100%, or style it based on your preferences.

<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Incorporate the required scripts

In this tutorial, we will be using the AnyChart JS library as an example. However, the fundamental concepts and steps we discuss can also be applied to other charting libraries. AnyChart is a popular choice due to its extensive examples and comprehensive documentation, making it suitable for beginners and experienced professionals. We will include two essential scripts for the Pareto chart: the core library file, which is a prerequisite for all charts, and the Pareto module. Remember to add these scripts within the <script> tags in the <head> section of your HTML page. The JS charting code is to be placed within the <script> tags in the <body> section.

<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pareto.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS Pareto Chart will come here
    </script>
  </body>
</html>

3. Input the data you want to visualize

Since the Pareto chart typically involves a small amount of data, it can be directly integrated:

let data = [
  { x: "Managing the loan or lease", value: 15265 },
  { x: "Problems when you are unable to pay", value: 7678 },
  { x: "Taking out the loan or lease", value: 4370 },
  { x: "Shopping for a loan or lease", value: 2029 },
  { x: "Managing the line of credit", value: 806 },
  { x: "Other issues", value: 1427 }
];

4. Configure the visualization using JavaScript

With everything now in place, let me demonstrate how just a few lines of code can quickly generate an interactive Pareto diagram using JavaScript. To ensure that the enclosed code only runs after the page is fully loaded, encapsulate it within a function like this:

<script>
  anychart.onDocumentLoad(function () {
    // the following code here
  });
</script>

Within the function, first add the data:

anychart.onDocumentLoad(function () {
  let data = [
    { x: "Managing the loan or lease", value: 15265 },
    { x: "Problems when you are unable to pay", value: 7678 },
    { x: "Taking out the loan or lease", value: 4370 },
    { x: "Shopping for a loan or lease", value: 2029 },
    { x: "Managing the line of credit", value: 806 },
    { x: "Other issues", value: 1427 }
  ];
});

Second, create a Pareto chart instance with the provided data:

let chart = anychart.pareto(data);

Third, create two Pareto series, bar (column) and line:

let column = chart.getSeriesAt(0);
let line = chart.getSeriesAt(1);

Fourth, to enhance comprehensibility, add some important captions. For example, name both Y-axes. One (for the Pareto column series) will represent the issue frequency, while the other (for the Pareto line series) will display the cumulative percentage.

chart.yAxis(0).title("Issue frequency");
chart.yAxis(1).title("Cumulative percentage");

Also, it’s always good to properly name the entire chart:

chart.title("Consumer Loan Customer Complaints (CFPB)");

Finally, set the container by referring to the HTML container created in step 1 and initiate the Pareto charting:

chart.container("container");
chart.draw();

And voila! In no time, a visually appealing JavaScript-based Pareto chart displaying consumer grievances is ready! Glance at it and its resulting code below; you can see the interactive version and play with the code here. And keep reading this tutorial for some options to improve this visualization!

<html>
  <head>
    <title>Pareto Chart JavaScript</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-pareto.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add data
        let data = [
          { x: "Managing the loan or lease", value: 15265 },
          { x: "Problems when you are unable to pay", value: 7678 },
          { x: "Taking out the loan or lease", value: 4370 },
          { x: "Shopping for a loan or lease", value: 2029 },
          { x: "Managing the line of credit", value: 806 },
          { x: "Other issues", value: 1427 }
        ];
        // create a pareto chart with the data
        let chart = anychart.pareto(data);
        // set a pareto column series
        let column = chart.getSeriesAt(0);
        // set a pareto line series
        let line = chart.getSeriesAt(1);
        // name the measure axis
        chart.yAxis(0).title("Issue frequency");
        // name the cumulative percentage axis
        chart.yAxis(1).title("Cumulative percentage");
        // add a chart title
        chart.title("Consumer Loan Customer Complaints (CFPB)");
        // set the container element id for the chart
        chart.container("container");
        // initiate the pareto chart drawing
        chart.draw();
      });
    </script>
  </body>
</html>

Customizing a Pareto Chart

Creating a basic Pareto visualization was quite effortless. However, you'll be pleasantly surprised to discover how you can also easily modify the chart and enhance its aesthetics. Let me show you some ways to customize the Pareto chart and take it to the next level.

Modifying the colors
Adding labels to the columns
Improving the tooltip
Setting the interval for the right Y-axis
Adding the reference lines
Adding a crosshair
Arranging the X-axis labels
Enhancing the title

FOR A WALKTHROUGH OF THESE JS PARETO CHART CUSTOMIZATIONS, CONTINUE READING THE TUTORIAL HERE.

DEV Community: andreykh

A Metric Dropped. What Charts Help Find the Root Cause?

Shortlist: Which Chart Answers Which Question

Seven Charts, Seven Questions

Decomposition Tree: Which part of the number is dragging it down?

Pareto Chart: Of all the causes, which few actually matter?

Waterfall Chart: What moved the number from then to now?

Heatmap Chart: Which combination of two things is the problem?

Box Plot: What is the average hiding?

Scatter Plot: Do these two things really move together?

Sankey Diagram: Where does the volume go, and where does it leak?

How They Chain: A Worked Example

What Is Not Here

What to Do With This

Creating a Vertical Area Chart with JavaScript: 80+ Years of U.S. Presidential Approval Data

What Is a Vertical Area Chart?

How to Build a JavaScript Vertical Area Chart

1. Create an HTML Page

2. Include the JavaScript Files

3. Prepare the Data

4. Write the JS Code for the Chart

Add the Data

Create a Data Set and Map the Two Series

Create the Chart

Add the Two Area Series

Configure the Scales

Final Steps

Full Code and Result

How to Customize a JavaScript Vertical Area Chart

A. Smooth the Curves with Spline Area

B. Set Series Colors

C. Format the Value Axis

D. Highlight the Zero Baseline

E. Add a Contextual Tooltip

Build the President Lookup Table and Function

Configure the Tooltip

Final Result

Conclusion

How to Enable Pinch-to-Zoom in Stock Charts — JavaScript Chart Tips

Question: How to Add Pinch-to-Zoom to JavaScript Stock Chart?

Solution: Implementing Pinch Zoom in JS Stock Charts

Overview

In Detail

Example

Further Learning

Wrapping Up

Custom Image Markers in Quadrant Charts — JS Chart Tips

Question: How to Display Custom Images as Markers in Quadrants?

Solution: Adding Images as Markers for Quadrant Data Points

Overview

In Detail

Examples

Further Learning

Wrapping Up

Custom Time Intervals in Stock Charts — JS Chart Tips

Question: How to Set Stock Data Grouping Intervals?

Solution: Creating Custom Data Grouping in Stock Charts

Overview

In Detail

Examples

Further Learning

Wrapping Up

Python Django Financial Trading Dashboard — Integrating AnyChart JS Charts

Quick jump:

Updating the View

Updating the Template — index.html

GOTCHA

Updating the Template — historical_data.html

Summary

Next Steps

Useful AnyChart Links

Creating a Roman History Timeline Chart in JavaScript

Table of Contents

Introduction

Step 1: Setting Up Environment

1.1. Create Basic HTML Document

1.2. Create Container for Chart

1.3. Include All Necessary Resources

1.4. Complete HTML Setup

Step 2. Adding Data