简体中文
EnglishWebsite review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is TechanJS?
TechanJS is a JavaScript library for financial charting and technical analysis, built on top of D3. It gives developers ready-made chart types and indicator calculations so they can assemble interactive stock and market charts for desktop and mobile browsers without writing the drawing logic from scratch.
Its two main parts work together:
- Charting primitives — candlestick, OHLC and volume plots, plus a trades overlay for showing individual buy/sell points.
- Technical indicators — moving averages (simple and exponential), Ichimoku Cloud, RSI and MACD, which can be plotted alongside price.
Because it sits on D3, the output is SVG-based and can be styled, animated and made interactive with the usual D3 patterns. That also means it is a library, not a finished product: you supply the data, layout and surrounding UI.
Who it suits
A developer building a trading dashboard, a portfolio tracker or an educational market app who already knows D3 or is willing to learn it. You get sensible defaults for common charts and can drop to D3 when you need something custom. If you want a plug-and-play widget with a built-in toolbar and data feed, this is a lower-level starting point than a full charting platform.
A concrete next step
Clone the examples from the project's documentation and render the "Complete Example," which combines candlesticks, volume and indicators on one chart. Then swap in your own OHLC data array and check how the indicators respond — that single exercise shows whether the library's data format and rendering model fit your project. For broader context on the D3 foundation, see D3.
How do I create a candlestick chart with TechanJS?
TechanJS is a JavaScript charting library built on D3 that renders financial charts, including candlesticks, in the browser. To create a candlestick chart, you pair D3's SVG rendering with TechanJS's chart and indicator helpers: you set up scales for price and time, load your OHLC data, then instantiate a candlestick chart and draw it. The library's home page lists Candlestick, OHLC, Volume, Moving Average, Ichimoku Cloud, RSI, MACD, and Trades among its supported features, and points to Documentation, Source, and Examples for implementation details.
Typical workflow
- Include D3 and TechanJS in your page.
- Define a price scale and a time scale sized to your chart area.
- Prepare data as an array of objects with date, open, high, low, and close fields.
- Create an accessor that maps those fields, then build the candlestick chart with it.
- Render the chart into an SVG group, optionally adding volume or indicator layers.
A minimal sketch of the render step looks like this:
const accessor = d3.accessor()
.date(d => d.date)
.open(d => d.open)
.high(d => d.high)
.low(d => d.low)
.close(d => d.close);
const chart = techan.plot.candlestick()
.xScale(x)
.yScale(y)
.accessor(accessor);
svg.append("g")
.datum(data)
.call(chart);
Practical considerations
- Data source matters. TechanJS expects OHLC records; if you are pulling from an API, normalize field names before rendering.
- Scales drive readability. A linear price scale and a time scale are the usual choice; zoom and pan behavior comes from how you wire D3's zoom to those scales.
- Compose rather than rebuild. Volume, moving averages, and RSI are separate plot types, so you layer them on the same SVG instead of writing one monolithic chart.
- Mobile support is a stated goal. The library describes charts for modern and mobile browsers, so responsive sizing of the SVG is worth setting up early.
Where to look next
The project's own Documentation and Examples pages are the fastest way to see working candlestick code and the full set of indicators. For general D3 patterns that apply to any custom chart, D3.js is the canonical reference, and GitHub hosts the TechanJS source if you need to inspect behavior or file issues.
Can TechanJS render charts on mobile browsers?
Yes. TechanJS is built to produce interactive financial charts for modern and mobile browsers, so the charts it renders are intended to work on phone and tablet screens as well as desktop ones. The library is a stock-charting and technical-analysis layer on top of D3, with support for candlestick and OHLC series, volume, moving averages, Ichimoku Cloud, RSI, MACD and trade markers.
What matters on a phone
Mobile rendering is less about whether a chart appears and more about whether it stays legible and responsive:
- Touch interaction. D3-based charts respond to pointer and touch events, but you normally need to add your own pan, pinch-zoom and tooltip behaviour.
- Screen space. Candlesticks and indicator panels compete for a small viewport. Showing one or two indicators at a time, or letting users toggle them, usually works better than displaying everything at once.
- Redraw cost. Recalculating indicators on every resize or data tick can feel sluggish on lower-powered devices; compute once and redraw the scales when the viewport changes.
A concrete scenario
Suppose you are building a portfolio page that a reader opens on a train. You want a compact candlestick chart with a volume strip, a 50-period moving average and a tap-to-inspect tooltip. TechanJS gives you the chart primitives and indicator calculations; you supply the responsive container, the touch handling and the decision about which series to hide on narrow screens.
Practical next step
Open the library's examples on an actual phone, not just a resized desktop window, and check the candlestick, OHLC and complete-example charts for touch responsiveness and label legibility. If you need a broader comparison of charting approaches, D3 itself is documented at D3, and general financial-charting patterns appear in projects such as TradingView's published charting material.
How do I add technical indicators like RSI or MACD to a TechanJS chart?
TechanJS treats indicators as separate layers you compute and then draw, rather than as built-in chart options. You build the price chart first, then add an indicator plot that shares the same x-scale (time axis) so the two stay aligned.
The general pattern
- Prepare data with the indicator fields. TechanJS's indicator functions take your OHLC/candle data and return it enriched with new properties — for example an RSI series or MACD line, signal and histogram values. Run the relevant indicator over your dataset before you draw anything.
- Create a second plot area. Give the indicator its own SVG group and y-scale beneath the main price plot. RSI and MACD are usually drawn in a panel below the candles because their values have nothing to do with price levels.
- Draw the indicator series. Use the library's plot primitives for the lines, and for MACD a bar/area plot for the histogram (which is often rendered with two colours, above and below zero).
- Keep the x-scales in sync. Both plots must map the same time values to the same horizontal positions, so panning or zooming one keeps the other aligned.
- Add reference levels. RSI conventionally gets horizontal guides at 30 and 70; MACD gets a zero line. These make the chart readable at a glance.
What the library gives you
The page lists RSI and MACD among the supported indicators, alongside moving averages (simple and exponential), Ichimoku Cloud, volume and trades. That means the calculation and the plotting helpers exist — you are wiring them into a layout, not writing the maths from scratch. Candlestick and OHLC renderers cover the price panel.
Practical notes
- Panel heights matter. Give RSI and MACD enough vertical room to be legible; cramming them into a thin strip defeats the purpose.
- Colour discipline. If the histogram uses red/green, reserve those for it and keep the signal and MACD lines in neutral tones, or the panel becomes noise.
- Mobile is a stated target, so test the stacked layout at narrow widths — indicator panels are the first thing to become unreadable on a phone.
- Data shape is the usual failure point. Most "nothing renders" problems come from indicator values being
undefinedfor the first N periods, which is normal for RSI and MACD warm-up windows. Either trim those rows or let the line start late.
Where to go next
Start from the complete example on the site: it shows candles, volume and indicators assembled together, which is the fastest way to see how the plot groups and scales are meant to fit. If you want a broader comparison of charting approaches before committing, the D3 foundation is documented at D3.js, and GitHub hosts the source and issue tracker for questions about specific indicator behaviour.
Is TechanJS free to use and what license does it have?
TechanJS is free to use, and the site itself states its license as "TechanJS License" rather than naming a standard open-source license such as MIT or Apache 2.0. That distinction matters: free of charge is not the same as permissive reuse, so you should read the actual license text before shipping it in a commercial or client product.
What this means in practice
- No payment signals: The page shows no pricing, checkout or subscription elements, so there is no indication of a paid tier for the library itself.
- The license name is product-specific: A bespoke license can still be permissive, but its terms are defined by that document, not by assumptions carried over from D3 or other charting libraries.
- D3 is a separate dependency: TechanJS is built on D3, which has its own license. If you redistribute a bundle, you may need to satisfy both.
A quick way to decide
If you are evaluating it for a personal dashboard, prototype or internal tool, the cost question is effectively settled — there is nothing to buy. If you are embedding it in a distributed commercial application, treat the license as the deciding factor and check whether it permits your intended use, modification and redistribution.
As a concrete example: a developer building an internal candlestick and RSI viewer for a trading desk can likely adopt it immediately, while an agency packaging the same charts into a resold white-label platform should confirm the terms first. For a widely used permissive alternative, compare with D3 itself, which supplies the underlying primitives but not the financial chart types.
How does TechanJS compare to other D3-based financial charting libraries?
TechanJS is a D3-based library that combines candlestick and OHLC charting with technical-analysis indicators in one package. Its distinguishing trait is that indicators are computed in the library itself, not just drawn: the page lists candlestick, OHLC, volume, simple and exponential moving averages, Ichimoku Cloud, RSI, MACD and trade markers, plus a complete example. If your project needs standard stock charts plus common studies without assembling a separate math layer, TechanJS covers both sides of that job.
Where the real differences show up
| Consideration | TechanJS approach | What to weigh against alternatives |
|---|---|---|
| Rendering model | Built on D3, aimed at interactive charts for modern and mobile browsers | D3 gives full control over SVG, but you own performance tuning for many data points |
| Indicator coverage | Ships with core studies (moving averages, Ichimoku, RSI, MACD) | Libraries that only render expect you to compute indicators yourself or add another dependency |
| Chart types | Candlestick, OHLC, volume, trade overlays | Some libraries specialise in one type or in non-financial charting |
| Customisation | You compose with D3 primitives | Lower-level than all-in-one widget libraries, so more code for tooltips, zoom and layout |
| Maintenance | Copyright notice on the page is from 2016 | Check recent activity before depending on it for a long-lived product |
Choosing between them
The practical split is between "chart renderer" and "charting plus analysis." If your team already has an indicator pipeline, a pure D3 financial charting layer may be lighter. If you want candlesticks, volume and studies working together quickly, TechanJS removes that glue work — at the cost of learning its API and accepting its update cadence.
A concrete scenario: an internal dashboard showing daily OHLC bars with a 50/200 moving average and RSI panel. With TechanJS you define the scales, feed the data, and add the indicator series; the browser renders SVG. For a high-frequency view with tens of thousands of ticks, SVG rendering becomes the limiting factor, and a canvas-based library or a D3 canvas approach is worth comparing.
For broader context, D3 itself is at D3 and other financial charting options include Plotly and Highcharts.
Next step: build the complete example from the TechanJS documentation with your own dataset, then test it on a mid-range phone. If scrolling and indicator redraws stay smooth at your expected data volume, the library fits; if not, plan for canvas rendering or a lighter renderer with your own indicator code.
Google Cloud DNS
Fastly
User reviews (0)