A ternary plot made with TernaryPlot.comABC0%10%20%30%40%50%60%70%80%90%100%0%10%20%30%40%50%60%70%80%90%100%0%10%20%30%40%50%60%70%80%90%100%A: NaN%B: NaN%C: NaN%Made with TernaryPlot.com


SizeSymbolOpacityFill colorStroke colorTitle




Your feedback is vital in making TernaryPlot.com better and more useful! If you think something doesn't work well or if your mising something then let me know with the form below.

Which of the following best describes you?
How often do you use TernaryPlot.com
What feature do you miss most?
What other chart types would you like to have a web app like TernaryPlot.com for?
Would you pay to use TernaryPlot.com?
Do you have any comments?




Entered data is normalized automatically i.e. proportions are calculated of any three positive values you enter. This means you do not need to calculate the percentages yourself first.

Example data point
Data typeABATotal

Data Headers

Rename your data headers (i.e. data column names) by clicking on them in any table. The data headers are synced between all tables.

Starting a new line or area

To start a new line or area, disable a row between the rows of the lines. Only the style properties of the first row of a line or area are applied. The subsequent style properties are ignored.

Example Lines/Areas
333333First lineRedLinear
203050First lineIgnoredIgnored
304030First lineIgnoredIgnored
000Unchecked row to separate lines
50500Second lineBlackBasis
50500Second lineIgnoredIgnored

Saving data

Your data is saved automatically locally in your browser everytime you stop editing a table. So when you come back TernaryPlot.com later, you'll be asked whether you want to reload your prior data. See also, the sections on downloading and uploading a csv file for saving data in the tables as csv files

This tool runs completely on the client-side using JavaScript, so your data never leaves your computer. Put another way, your entered values are not transmitted to any server and are only stored locally on your machine. A nice added benefit of this is that you can use TernaryPlot.com offline just as well!

Downloading data

Download the table data by clicking the download button above a table and selecting the desired format. You can download data as either CSV or a JSON file.

Uploading data with a csv file

CSV files can be uploaded and read into the table provided they are formatted correctly and contain the right column names. Click upload button above a table and select your csv file. The right column names per type are listed below, for your convenience you can click on of the headers to copy them. Also make sure your entered values are correct, for example a symbol of a point can be only one of the 7 symbol types and a color must be a valid color.

To mark the end of a line or area, set the value of enabled to false for the next row.

Column headers

Note that you should name the data headers a, b, and c. Already naming the data columns in the csv file will not work. When uploading, an alert appears stating which columns will be read, and which columns will be ignored.


Style Properties

Shared Properties

The following properties apply to all types of plot elements

A value between 0 and 1. Opacity is the opposite of transparency.
Enter a color in one the following formats or click the color box on the right side to open a color picker.(The color picker varies per browser and operating system)
  1. Hexadecimal format #fac42f
  2. RGB format rgb(250, 196, 47)
  3. HSL format hsl(44, 95, 58)
  4. A named color, these are shown in the suggested list. Check out this nifty webapp: Sorted CSS Colors to find the right named color.
The SVG title attribute of the element. This does not add text, it only sets the text in box that shows up when you hover your mouse over something. If you want to add text to the plot, add it in in the text table.


The following properties of point elements are configurable.

Select one of the folowing symbols
  • Circle (default)
  • Cross
  • Diamond
  • Square
  • Star
  • Triangle
  • Wye
The size of the symbol in pixels
See opacity in shared properties
Fill color
Fill color is the color of the inside of the symbol. See color on how to enter colors.
Stroke color
The colors of the stroke (i.e. border) of the symbol. See color on how to enter colors.


The following properties of text elements are configurable.

The text that should be plotted
Font size
The font size in pixels
See opacity in shared properties
Text anchor
How to place the text relative to its coordinate anchor. Choose either start, middle or end.AStartAMiddleAEnd
The rotation of the text in degrees. The point of rotation is determined by the text anchor.TernaryPlot.com20°TernaryPlot.com70°TernaryPlot.com180°
The color of the text. See color on how to enter colors.


Curve type
There are different ways to connect the points that form a line. A variety of curve types are provided for this purpose. You can select one of the following curve types.
  • Linear (default)
  • Cardinal
  • Basis spline
  • Catmull–Rom spline
The width of the line in pixels
The pattern of dashes and gaps of the line. Select one of the predefined option or enter your own 'stroke-dasharray'. A stroke-dasharray is a list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. Learn more about stroke-dasharray on MDN.soliddotteddot-dashdot-dot-dashshort-dashedmedium-dashedlong-dashed
Arrow start
Toggle to attach an arrowhead to the start of the line
Arrow end
Toggle to attach an arrowhead to the end of the line
See opacity in shared properties
See Title in shared properties.


So start a new line, disable a row between the rows of the lines.
Curve type
See the curve section under "Lines". Curve types work exactly the same for areas.

Configuring the plot


New Domains
Enter the values of the new domains and then click the "Set Domains" button. Please double check if the entered domains are correct. The plot will break if the domains are incorrect.
Reverse domains
Click to reverse the current domains. Axis ticks and labels are changed automatically to match.


Label Angles
The angle of each axis label in degrees.
Label Offsets
The offset distance from the vertex of the plot to the axis label in pixels.
Labels at Center
Toggle to place labels at the middle of the axis.


Tick Angles
The angle of each axis ticks in degrees
Number of Ticks
The number of ticks of each axis. The specified count is only a hint, the scale may return more or fewer values depending on the domain.
Length of Ticks
The size of each tick in pixels. Negative size means ticks will be placed inside the plot.


Number of Gridlines
The numer of gridlines for each axis. The specified count is only a hint, the scale may return more or fewer values depending on the domain.
Gridlines Color
The color of the gridlines. To hide the gridlines, set all gridline counts to 0.


Transparent background
Toggle to make the background transparent instead of white. The plot will have no background when you download it.
Clip to ternary plot
By default, points and lines are clipped to the triangle, meaning any point that falls outside of it is cut off. Toggle to turn clipping on or off.

Downloading the plot

Just hit the download button below the plot, easy as that. You can download the plot in either SVG or PNG

SVG (recommended)

SVG is a terrific vector graphics format that most people don't seem to know about. What makes SVG so good is that – unlike PNG – it's very editable! You can edit text, drag individual elements around, change colors and much more with a vector editing program like Inkscape (free & open-source), Adobe Illustrator, or Sketch. What's more, as its name suggests, SVG's are scaleable.
If you know a little SVG syntax you can open it in a text editor (like VS Code) and edit it directly.


PNG is common format and widely supported but is not easily editable. That's because PNG is a raster-graphics file format, simply a grid of pixels! If you don't need to edit the ternary plot anymore, great, go for PNG. If you want to tweak the downloaded ternary plot, consider SVG.