AddCandlestickSeries Is Not A Function | Fix In 5 Steps

You build a chart, call one line, and the console smacks you with a TypeError. It’s annoying, but it’s also a clue. When you see addcandlestickseries is not a function, JavaScript is telling you the object in your hand does not have that method.

Most of the time, that comes from one of three situations: you loaded a newer Lightweight Charts build that swapped the series API, you didn’t get a real chart instance back, or your bundler/import path gives you a different export than the docs you followed. The fix is usually quick once you confirm which one you hit.

AddCandlestickSeries Is Not A Function Causes You Can Check

This message can show up even when your code looks fine at a glance. A small mismatch between docs, version, and build type is enough to remove a method you expect.

Think of the method name as a contract between your code and the library. When that contract changes, JavaScript does not guess your intent. It just says the function is missing. Your job is to line up three pieces: the library version, the build type you loaded, and the API shown in the docs for that version.

A quick way to see what you’re really holding is to log the chart instance and expand it in the console. If you see a method named addSeries but not addCandlestickSeries, you already have your answer. Your code is correct for a different release.

What This Error Means In Plain Terms

The text “is not a function” does not mean your whole chart setup failed. It means the property exists and is not callable, or it does not exist at all. Both cases point to the same root issue: the object you call is not the same shape as the one your snippet assumed.

• Property missing — chart.addCandlestickSeries is undefined because the API moved.
• Wrong object — chart is not a chart API object, so none of the series methods are there.
• Shadowed name — a local variable named chart overwrote your real chart instance.

Fast Sanity Checks That Catch Most Bugs

Before you chase imports, check these quick signs that you’re in a healthy state.

• Container exists — the element is not null and has a non-zero width and height.
• Library global exists — in a script-tag setup, LightweightCharts is defined after load.
• Create function is real — createChart is a function and returns an object.

• Version mismatch — Your tutorial targets v4, your page loads v5+ from a CDN that auto-updates.
• Wrong method for your version — Newer releases use a different call to create a candlestick series.
• Chart instance is not what you think — A null container, SSR run, or race condition leaves you with an object that is not an IChartApi instance.
• Import shape changed — ESM, CJS, and UMD builds expose exports in different ways, so you might be calling methods on the wrong namespace.
• Multiple copies loaded — One script tag loads v4, a bundler pulls v5, and your runtime ends up with mixed types.

Quick Version Check Before You Touch Code

The fastest path is to confirm what you actually loaded in the browser. If you use a CDN without pinning a version, you can wake up to a new major release without changing your file.

1. Open DevTools — Go to Console and keep it visible while you reload.
2. Find the script source — In Network, filter for “lightweight-charts” and click the file that loaded.
3. Check for a version hint — Many builds include a version string near the top, or in a global you can log.
4. Log the chart object — Print the chart instance and scan its methods list for addCandlestickSeries or addSeries.

If you spot addSeries but not addCandlestickSeries, your code is written for an older API. That’s the most common reason this error appears with CDN links that pull the latest package.

Fix The Missing Candlestick Series Method In Lightweight Charts

Lightweight Charts documentation for newer versions shows a pattern that works across modern builds: create a chart, then add a series by passing a series type token. In that flow, a candlestick series is created with addSeries and the CandlestickSeries helper, not addCandlestickSeries.

Use The New Series Call

Swap your series creation line to the newer call. Keep the rest of your data code the same.

• Create chart first — Make sure createChart runs after the container exists in the DOM.
• Add series with a type — Use addSeries with the candlestick series type from the library.
• Set data after series creation — Call setData once you have the series instance.

Keep Your CDN Link Stable

If your project must stay on the old method, pin the library version in the URL. When you reference a CDN path with no version, it can point to a newer major release later, which is how older snippets break.

Know Which Docs Match Your Build

The API reference and the tutorial pages can be on different version tracks. A tutorial page might show an older sentence that mentions addCandlestickSeries, while the up-to-date code block uses addSeries. Trust the runnable code snippet first, then the API page for your selected version.

Library Version	Candlestick Call	What To Watch
4.x	chart.addCandlestickSeries()	Works in v4 docs and examples. Pin CDN to a 4.x tag.
5.x+	chart.addSeries(CandlestickSeries)	Method name moved. Use the series-type token and update imports.

Code Patterns That Match Each Setup

If you copy code from a package-based setup into a script-tag page, it can break even on the right version. The names you call depend on how the library is exposed.

Script Tag Setup

In a standalone script build, the library lives on a global variable. You call createChart from that namespace, then add the series on the chart instance.

ESM Import Setup

With a bundler, you import the pieces you need. Keep the import line aligned with the docs for your installed version.

import { createChart, CandlestickSeries } from 'lightweight-charts';

const chart = createChart(container);
const series = chart.addSeries(CandlestickSeries);
series.setData(data);

If your project is locked to a 4.x release, the old call still works. The safest move is to pin your dependency so an auto-update cannot swap the API out from under you.

How To Spot A Namespace Mix-Up

A namespace mix-up looks sneaky because the library is present, but the object you call is not the chart API. You might be calling series methods on the library namespace, or calling library helpers on the chart instance.

• Log the namespace — Print LightweightCharts and confirm createChart exists on it in a script-tag page.
• Log the chart value — Print chart and confirm you see timeScale, priceScale, and series methods.
• Check your variable names — If you reuse “chart” for another value, you can overwrite the instance.

Once those checks pass, the remaining cases are almost always version or build drift. That’s when a pinned version and a clean import path save time.

Fix In 5 Steps When The Method Still Fails

If you already switched to the correct call and still see the error, it’s time to verify the object you’re calling and the way the library is loaded.

If you still see addcandlestickseries is not a function after swapping calls, print Object.getOwnPropertyNames(chart) in the console. If addSeries shows up, you’re on v5+. If neither method shows up, chart isn’t a chart instance. Fix the creation step first. Then retry the series line again.

1. Confirm the chart handle — Log the value returned from createChart. If it’s undefined, the library is not loaded or createChart is not the function you think.
2. Verify the container element — Make sure document.getElementById returns a real element and it has a height. A zero-height container can hide the chart and make debugging feel worse.
3. Check script order — When using a script tag, your code must run after the library script loads. Put your code under the library tag or use defer on both scripts.
4. Stop double-loading — Search your page and bundle for “lightweight-charts”. Remove extra copies so the global and your imports point to the same build.
5. Match import style to your bundler — If you use ESM, import createChart from the package. If you use a standalone script, use the global LightweightCharts namespace.

Common Integration Traps In React, Next.js, And Angular

App setups add two extra failure modes: code that runs before the DOM exists, and code that runs on the server where the chart library cannot render.

• Client-only render — Create the chart inside an effect hook or lifecycle method that runs after mount, not during server render.
• Stable container sizing — Give the chart div a fixed height or a parent with a known height, then call resize when the layout changes.
• Cleanup on unmount — Call chart.remove() to avoid stale references if the component rerenders.
• Avoid ref races — Only call createChart once the ref is set and non-null.

If you hit addcandlestickseries is not a function inside a component, it often points back to version drift in your package lockfile or a script tag still present in your HTML template.

Test Your Fix And Lock It In

Once the chart renders, take one more minute to make the fix stick. This prevents the same console error from coming back after a dependency bump or a cached CDN change.

One tip if you rely on a CDN, clear cache while testing. Some CDNs can serve a cached file even after you change the URL, and that can make it feel like your code edit did nothing. A hard reload plus a pinned version removes that doubt.

During development, you can also add a quick guard right after chart creation. If the method you plan to call is missing, throw a clear error that prints the property names on the chart object. That turns a vague runtime crash into a clean message you can act on.

1. Pin the version — Use an explicit package version in npm or in your CDN URL.
2. Save a tiny repro — Keep a one-file demo that creates a chart and one candlestick series. It’s a quick sanity check later.
3. Watch for API notes — Skim the release notes when moving across major versions and update your series calls in one pass.
4. Add a console guard — During development, assert that your chart object has the method you plan to call.

After you lock the version and align your code to the right API, this error usually stays gone for good.