×
lightningchart JS free trial Product box

Try LightningChart JS FREE for 30 days

We’ll send you a download link (.zip) directly to your inbox.

During your 30-day trial, you'll get:

  • Full technical support and onboarding assistance
  • 100+ ready-made interactive examples
  • Documentation tailored for your industry and needs
  • All the product features

We'd love to show you how LightningChart can be customized to suit your needs.

Dhawal Kapoor

Dhawal Kapoor

Senior Sales Associate (Europe, India)

+91 85917 31582

Book a meeting
Yun Du

Yun Du

Regional Account & Marketing Executive (China, Japan and South Korea)

+358 503 543 706

Book a meeting
Shreekant Navare

Robert Taylor

Regional Account Manager (North America, South America)

+358 505 528 995

Book a meeting

Our dedicated sales team is ready to help you find the perfect solution for your data visualization needs. Don't hesitate to reach out for personalized assistance or to schedule a demo of our products.

×
lightningchart JS free trial Product box

Try LightningChart .NET FREE for 30 days

We’ll send you a download link directly to your inbox.

During your 30-day trial, you'll get:

  • Full technical support and onboarding assistance
  • 100+ ready-made interactive examples
  • Documentation tailored for your industry and needs
  • All the product features

We'd love to show you how LightningChart can be customized to suit your needs.

Dhawal Kapoor

Dhawal Kapoor

Senior Sales Associate (Europe, India)

+91 85917 31582

Book a meeting
Yun Du

Yun Du

Regional Account & Marketing Executive (China, Japan and South Korea)

+358 503 543 706

Book a meeting
Shreekant Navare

Robert Taylor

Regional Account Manager (North America, South America)

+358 505 528 995

Book a meeting

Our dedicated sales team is ready to help you find the perfect solution for your data visualization needs. Don't hesitate to reach out for personalized assistance or to schedule a demo of our products.

×
Student License Application

Apply for Student License

Fill out the form below to get your free student license

LightningChartHow to use Ichimoku Cloud

ArticleLearn more about how to use Ichimoku Cloud in LightningChart Trader for advanced financial and trading analysis

Continue Reading

Written by a human | Updated on April 22nd, 2025

TABLE OF CONTENTS

How to use Ichimoku Cloud

This article shows how to use Ichimoku Cloud and add and configure it in a trading chart application built with LightningChart for both .NET and JavaScript languages.

Ichimoku Cloud is a technical indicator used in trading charts and provides information about the support and resistance levels as well as the current price trend.

Ichimoku Cloud consists of five separate indicator lines, each having its own formula and settings.

As a refresher, feel free to check my last Ichimoku Cloud article where you can learn more about reading and interpreting the Ichimoku Cloud technical indicator.

Ichimoku-cloud

How to use Ichimoku Cloud with LightningChart Trader

There are two ways how to use Ichimoku Cloud in a LightningChart Trader application: using the indicator menu in the top-right corner of the chart or creating the indicator in code.

Adding Ichimoku Cloud using the indicator menu is the easiest way, but using it generates the Ichimoku Cloud with default settings.

If you need to establish settings other than the default ones, the indicator needs to be modified after adding it. So, when creating the Ichimoku Cloud via code, it is possible to generate it with any desired combination of settings.

LC-Trader

How to use the Ichimoku Cloud and add it via the indicator menu: you can see the .NET version on the left and the JS version on the right. In the JS version of the Trader, the Ichimoku Cloud can be found under the Trend Indicators section.

Adding Ichimoku Cloud using code

In the .NET Trader, create the Cloud and add it to the chart’s indicator collection:

IchimokuCloud ichimokuCloud = new IchimokuCloud();
_chart.Indicators.Add(ichimokuCloud);
In JavaScript simply create the Cloud via addIchimokuCloud() method:
_chart.indicators().addIchimokuCloud()

Modifying Ichimoku Cloud

The Ichimoku Cloud is a rather complex technical indicator. Therefore, it has several settings that can be used to modify its behavior as well as its visual appearance. The available settings and how to change them differ slightly between .NET and JS versions Trader.

Currently, all the indicator modifications in the .NET Trader must be made in code. Contrarily, in the JS Trader Version, Ichimoku Cloud can be modified in code but also via the user interface, as there is a separate indicator settings menu available.

When modifying the settings in the code, the adjustable properties can be accessed at any time after the indicator object has been created.

LightningChart .NET Trader

IchimokuCloud ichimokuCloud = new IchimokuCloud();
ichimokuCloud.TenkanSenPeriodCount = 20;
ichimokuCloud.TenkanSenColor = Colors.Aqua;
ichimokuCloud.LineWidth = 2;
_chart.Indicators.Add(ichimokuCloud);

LightningChart JS Trader

const ichimokuCloud = chart.indicators().addIchimokuCloud()
ichimokuCloud.setPeriodCounts(20, 26, 52, -26)
ichimokuCloud.setTenkanSenColor('#00ffff')
ichimokuCloud.setLineWidth(2)

Note that in the above .NET code, the settings are being modified while creating the Ichimoku Cloud. However, this is not mandatory as the settings can be modified at any time after creation.

In the JS Trader, the indicator settings menu can be found in the top-left corner of the main price chart after at least one overlay indicator such as Ichimoku Cloud has been added.

This menu allows adjusting all the properties while running the application without writing any extra code.

Trader-Menu-UI

The indicator settings menu in JS Trader. The menu opens when the Edit indicator button is pressed.

The following tables show all the available properties and methods for the Ichimoku Cloud.

LightningChart .NET

Property
Type
Description
Property
ChikouSpanColor
Type
Color
Description
Changes the color of the Chikou Span line.
Property
ChikouSpanPeriodCount
Type
Integer
Description
Sets the number of time periods used to calculate the Chikou Span line. Technically this is the offset of the Close values.
Property
KijunSenColor
Type
Color
Description
Changes the color of the Kijun Sen line.
Property
KijunSenPeriodCount
Type
Integer
Description
Sets the number of time periods used to calculate the Kijun Sen line.
Property
LimitYToStackSegment
Type
Boolean
Description
Controls whether Ichimoku Cloud is clipped outside the price chart area. Enabled by default.
Property
LineWidth
Type
Double
Description
Changes the width of all the indicator lines.
Property
SenkouSpanAColor
Type
Color
Description
Changes the color of the Senkou Span A line.
Property
SenkouSpanBColor
Type
Color
Description
Changes the color of the Senkou Span B line.
Property
SenkouSpanBPeriodCount
Type
Integer
Description
Sets the number of time periods used to calculate the Senkou Span B line.
Property
ShowChikouSpan
Type
Boolean
Description
Controls the visibility of the Chikou Span line. Enabled by default.
Property
ShowKijunSen
Type
Boolean
Description
Controls the visibility of the Kijun Sen line. Enabled by default.
Property
ShowTenkanSen
Type
Boolean
Description
Controls the visibility of the Tenkan Sen line. Enabled by default.
Property
TenkanSenColor
Type
Color
Description
Changes the color of the Tenkan Sen line.
Property
TenkanSenPeriodCount
Type
Integer
Description
Sets the number of time periods used to calculate the Tenkan Sen line.
Property
Title
Type
String
Description
Sets the title text of the indicator.
Property
TrackIndicator
Type
Boolean
Description
Controls whether the cursor tracks Ichimoku Cloud and shows its values in the result table. Enabled by default.

The following tables show all the available properties and methods for the Ichimoku Cloud.

LightningChart JS

Method
Parameters
Description
Method
dispose()
Parameters
None
Description
Removes the Ichimoku Cloud from the chart.
Method
setChikouSpanColor()
Parameters
String
Description
Sets the color of the Chikou Span line. The color should be given in HEX format (e.g. #ffffff).
Method
setKijunSenColor()
Parameters
String
Description
Sets the color of the Kijun Sen line. The color should be given in HEX format (e.g. #ffffff).
Method
setLineWidth()
Parameters
Number
Description
Sets the width of all the indicator lines.
Method
setName()
Parameters
String
Description
Sets the name of the indicator.
Method
setPeriodCounts()
Parameters
4 x Number
Description
Sets the time period counts used to calculate the various Ichimoku Cloud lines. The same method is used to set the period count for all the lines simultaneously.
Method
setSenkouSpanAColor()
Parameters
String
Description
Sets the color of the Senkou Span A line. The color should be given in HEX format (e.g. #ffffff).
Method
setSenkouSpanBColor()
Parameters
String
Description
Sets the color of the Senkou Span B line. The color should be given in HEX format (e.g. #ffffff).
Method
setTenkanSenColor()
Parameters
String
Description
Sets the color of the Tenkan Sen line. The color should be given in HEX format (e.g. #ffffff).

Removing Ichimoku Cloud

Removing Ichimoku Cloud from the chart is a simple process. Again, this can be done in code in both versions and also via the user interface in the JS Trader.

In .NET, call the chart’s RemoveAndDisposeIndicator() method:

_chart.RemoveAndDisposeIndicator(ichimokuCloud);
In JavaScript, call dispose() for the indicator:
ichimokuCloud.dispose()

The above methods will remove Ichimoku Cloud and all references to it. In the JS Trader, Ichimoku Cloud can also be removed via the indicator settings menu in the top-left corner. The menu has a separate button for indicator removal, which essentially does the same thing as calling dispose() in code.

how-to-use-ichimoku-cloud-disposing-using-UI

Removing Ichimoku Cloud via the user interface in JS Trader.

Conclusion

In this article, I reviewed how to use Ichimoku Cloud, modify its settings, and dispose of the technical indicator from the chart. The methods described here were achieved using both versions of the LightningChart Trader: .NET and JavaScript.

The LightningChart Trader is an advanced technical analysis chart library that can be easily integrated into trading and financial applications. As we saw, the .NET version of the trader requires coding and we reviewed the different available properties you can use to customize your chart fully.

In the case of the JS Trader, you do not necessarily need code as you can add Ichimoku Cloud to your chart via the UI menu. But as we saw, using the different JavaScript methods listed above, you’re able to set different values.

In further articles, we will review how to use Ichimoku Cloud in different scenarios as well as how to use other technical indicators.

See you in the next articles.

Learn more about LightningChart Trader
Lasse Portin Senior Developer

Lasse Portin

Senior Developer

LinkedIn icon
divider-light

Continue learning with LightningChart