Highcharts Stock for Python – Using Technical Indicators

Highcharts Stock for Python - Using Technical Indicators logo

Highcharts Stock is a powerful JavaScript data visualization library that enables you to design rich, beautiful, and highly interactive data visualizations of time series data – including asset (stock, bond, real estate, etc.) prices. And using Highcharts Stock for Python, which is part of the broader Highcharts for Python Toolkit, you can easily and rapidly use Highcharts Stock in your Python code.

Tip
The Highcharts Stock for Python capabilities are quite extensive, and this tutorial is meant to just be a quick intro to using technical indicators in Highcharts Stock for Python. But we definitely recommend that you review our other tutorials to see more detail on how you can enrich your data visualizations using Highcharts Stock for Python and Highcharts Stock itself.

In addition to providing you with over 70 different base visualizations, Highcharts Stock and Highcharts Stock for Python also give you more than 40 different technical indicators, which are built-in statistical and analytical visualizations that the library will automatically calculate and visualize for you on your charts. No more calculating moving averages in your data frames or determining banding bounds! For a full list of the technical indicators offered by Highcharts Stock for Python, please take a look at the Supported Visualizations > Technical Indicators section of the library’s documentation,

This tutorial will show you how you can easily and rapidly add and configure technical indicators to your Highcharts Stock visualizations using Highcharts Stock for Python.

Getting Started with Highcharts Stock for Python

To use Highcharts Stock for Python, like with any Python library, you first have to install it. That’s super easy: just open your Python project (in your virtual environment – you are using virtual environments, right?) and execute:

$ pip install highcharts-stock

And that’s it! Highcharts Stock for Python will now be installed in your project and available for use. To use it in your code, you just have to import it the way you would any other library.

Importing Highcharts Stock for Python

The Highcharts Stock for Python library is quite big. It’s got a rich (read: complicated) API, with lots of different objects and modules. That’s a reflection of the visualization power that Highcharts offers you, but it does make the decision of what to import and how to import it a little more complicated.

Python best practice is to import only what you need, which helps to maximize the performance of your Python code and prevents your application’s namespace from getting cluttered with various things (and further reducing the memory footprint of your Python code, which is always good).

You can either import specific things from their precise locations, or you can also just import the catch-all highcharts module, which flattens the entire API and exposes just about every class/object in one location. We definitely recommend importing things from their precise location like so:

# Import classes using precise module indications. For example:
from highcharts_stock.chart import Chart
from highcharts_stock.global_options.shared_options import SharedStockOptions
from highcharts_stock.options import HighchartsStockOptions
from highcharts_stock.options.plot_options.candlestick import CandlestickOptions
from highcharts_stock.options.series.candlestick import CandlestickSeries

In Highcharts Stock for Python, technical indicators are treated the same as any other series type. This means that they have corresponding .options.plot_options classes and .options.series classes, so you can import them and work with them in ways very similar to standard series types – even if their APIs are a little different since they don’t expect their own data (they are calculated from the other series in your chart).

A Super Simple Example

While the fact that you can import and work with technical indicator series the same way you would any other series, there’s a much easier way to work with them. And that’s to use the .add_indicator() method.

Let’s assume that you have created a Highcharts Stock Chart instance called my_chart, and that in that chart you have created a CandlestickSeries which has an .id of “my_series” and which is also stored in an instance called my_series. Now, let’s say that we want to add a Linear Regression based on my_series. You have two different ways to do this:

Using Chart.add_indicator()

You can call the .add_indicator() method on your Chart instance as below:

# Add a Linear Regression technical indicator calculated from my_series to my_chart.
my_chart.add_indicator('linear regression',
  series = 'my_series',
  indicator_kwargs = {
    'dash_style': 'Dash',
    'id': 'my_linear_regression',
    'name': ‘My Linear Regression Indicator '
  })

So let’s breakdown what the above method call is doing. First, you’re telling the my_chart object that you want to add an indicator, specifically an indicator named “linear regression”. This tells Highcharts for Stock to use to create an instance of the LinearRegressionSeries. For convenience, you can use human-readable indicator names (as found in the list of supported technical indicators) or the prefix in the indicator series class name (the part before -Series).

Next, we’re telling the my_chart object that your new LinearRegressionSeries instance should be linked to whatever series exists on the chart that has an .id of ‘my_series’. This argument will either accept a string (indicating the .id of an existing series) or a -Series instance. If the chart does not already have a series with that .id, then it will add the new series. Otherwise, it will overwrite the existing series.

And finally we’re including a handful of keyword arguments which will be passed to the LinearRegressionSeries when it is instantiated. In this case, we’re passing the dash_style, id, and name keyword arguments which correspond to identically-named properties on the LinearRegressionSeries instance.

And that’s it! Your chart should now feature a linear regression chart similar to the one shown below:

A stock line chart displays a linear regression char using AAPL data

Using Series.add_indicator()

You can call the .add_indicator() method on your -Series instance as below:

# Add an indicator to the my_series CandlestickSeries instance.
my_series.add_indicator(my_chart,
  indicator = 'linear regression',
  indicator_kwargs = {
    'dash_style': 'Dash',
    'id': 'my_linear_regression',
    'name': ‘My Linear Regression Indicator '
  })

So let’s breakdown what the above method call is doing. First, you’re telling the my_series instance that you want to add an indicator, and that you want this indicator added (along with my_series if it isn’t already) to the Chart instance found in the my_chart variable.

Next, you’re telling it that you specifically want to add an indicator named “linear regression”. This tells Highcharts for Stock to use to create an instance of the LinearRegressionSeries. For convenience, you can use human-readable indicator names (as found in the list of supported technical indicators) or the prefix in the indicator series class name (the part before -Series).

And finally we’re including a handful of keyword arguments which will be passed to the LinearRegressionSeries when it is instantiated. In this case, we’re passing the dash_style, id, and name keyword arguments which correspond to identically-named properties on the LinearRegressionSeries instance.

And that’s it! When visualized, your chart should now feature a linear regression series similar to the one above.

More Resources

The above tutorial is just a really simple example of how you can create rich visualizations with just a handful of method calls using Highcharts for Python. But the library offers so much more! We recommend you take a look at the following additional resources which you may find useful: