> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Spark Line Chart

## Intro

A Spark Line chart is basically the same thing as a standard Line chart except that it a) does not include axes, providing a simple and uncluttered view of rises and falls in your data, and b) includes a built-in gauge that shows the degree of change in the chart data. For example, the following screenshots shows a Spark Line chart in which the COGS value has fallen 74.35% from an initial value of \$6.68K.

<Frame>
  <img alt="spark_line_example.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7L.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=a8e8d6699bbae95f9d02fba60675e215" width="405" height="376" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7L.png" />
</Frame>

By default, the gauge shows the degree of change between the first and last data items in the chart; however, you can change this to show the degree of change for the last two data items if you want. You can also change other aspects of Spark Line charts, such as whether the degree of change is a percentage or a value, whether it appears as green or red, the fill color for the chart, etc. You can make all of these changes in the Chart Properties for the chart.

As with most other chart types, Spark Line charts include hover labels that show the specific data for each data point. So even though there are no axes, users can still ascertain values for data points by mousing over them. For more information about hover labels, see [Formatting Data Label and Hover Text in Your Chart](/s/article/360043429693 "Formatting Data Label and Hover Text in Your Chart").

## Powering Spark Line charts

Spark Line charts require only two columns or rows of data from your DataSet—one for categories (generally dates or times) and one for values. As with most other Line charts, categories are represented along the horizontal axis and values are represented on the vertical axis (though these are not shown in a Spark Line chart for the sake of simplicity). To build a Spark Line in Analyzer, you drag your category column into the "X Axis" field and your value column into the "Y Axis" field.

For information about value, category, and series data, see [Understanding Chart Data](/s/article/360043428693 "Understanding Chart Data").

In the Analyzer, you choose the columns containing the data for your Spark Line chart. For more information about choosing data columns, see [Applying DataSet Columns to Your Chart](/s/article/360043428713 "Applying DataSet Columns to Your Chart").

For more information about formatting charts in the Analyzer, see [Visualization Card Building Part 2: The Analyzer](/s/article/360043428673 "KPI Card Building Part 2: The Card Builder").

## Customizing Spark Line charts

You can customize the appearance of a Spark Line chart by editing its **Chart Properties**. For information about all chart properties, see [Chart Properties](/s/article/360042925154 "Chart Properties"). The unique properties of Spark Line charts include the following:

<table border="1" cellpadding="1" cellspacing="1" data-aura-rendered-by="33:209;a"><thead><tr><th colspan="1" rowspan="1"><p> Property </p></th><th colspan="1" rowspan="1"><p> Description </p></th><th colspan="1" rowspan="1"><p> Example </p></th></tr></thead><tbody><tr><td colspan="1" rowspan="1"><p> General > Background Fill </p></td><td colspan="1" rowspan="1"><p> Specifies the background fill color for the chart. If <b> Default </b> is selected, no background color is used. </p></td><td colspan="1" rowspan="1"><p><a target="_blank" title="/@api/deki/files/5428/sparkline_background_fill.png"><img alt="sparkline_background_fill.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7J.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=da3576746e77b591b4f968af80a90a9a" width="800" height="347" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7J.png" /></a></p></td></tr><tr><td colspan="1" rowspan="1"><p> Value Options > Hide </p></td><td colspan="1" rowspan="1"><p> Hides the summary value in the chart. (This is the <em> first </em> number that appears in the chart's built-in gauge. For example, in the screenshot of the chart at the top of this article, the value is 6.68K.) </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Value Options > Value </p></td><td colspan="1" rowspan="1"><p> Indicates how the chart's summary value is derived. You can choose from any of the following options for this property: </p><table class="mt-responsive-table"><tbody><tr><td class="mt-noheading" colspan="1" rowspan="1"><p> First Value </p></td><td class="mt-noheading" colspan="1" rowspan="1"><p> The summary value is the first value on your line. </p></td></tr><tr><td class="mt-noheading" colspan="1" rowspan="1"><p> Last Value </p></td><td class="mt-noheading" colspan="1" rowspan="1"><p> The summary value is the last value on your line. This is the default option. </p></td></tr><tr><td class="mt-noheading" colspan="1" rowspan="1"><p> Sum </p></td><td class="mt-noheading" colspan="1" rowspan="1"><p> The summary value is the sum of all values on the line. </p></td></tr><tr><td class="mt-noheading" colspan="1" rowspan="1"><p> Average </p></td><td class="mt-noheading" colspan="1" rowspan="1"><p> The summary value is the average of all values on the line. </p></td></tr><tr><td class="mt-noheading" colspan="1" rowspan="1"><p> Minimum </p></td><td class="mt-noheading" colspan="1" rowspan="1"><p> The summary value is the minimum value on the line. </p></td></tr><tr><td class="mt-noheading" colspan="1" rowspan="1"><p> Maximum </p></td><td class="mt-noheading" colspan="1" rowspan="1"><p> The summary value is the maximum value on the line. </p></td></tr><tr><td class="mt-noheading" colspan="1" rowspan="1"><p> Count </p></td><td class="mt-noheading" colspan="1" rowspan="1"><p> The summary value is a count of the number of values on the line. </p></td></tr></tbody></table><p /></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Value Options > Size </p></td><td colspan="1" rowspan="1"><p> Specifies the size of the summary value in the chart. You can choose from <b> Medium </b> (default) or <b> Small </b>. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Value Options > Value Format </p></td><td colspan="1" rowspan="1"><p> Determines the general number format for your chart's summary value. Options include <b><b> Number </b></b> (which includes no special formatting), <b><b> Currency </b></b> (in which a currency symbol is affixed), and <b><b> Percentage </b></b> (in which a percent symbol is affixed). </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Value Options > Divide Value By </p></td><td colspan="1" rowspan="1"><p> Refers to the number that the gauge value is to be divided by, if any. This option is useful when the value is very large and you want to abbreviate it by dividing by a common number. For example, if the gauge value represented millions of dollars, you could choose to divide by millions—the gauge value would then be reduced to more comprehendible single digits. When you choose to divide by <b><b> Percentage </b></b>, the gauge value is multiplied by 100. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Value Options > Decimal Places </p></td><td colspan="1" rowspan="1"><p> Determines the number of decimal places used in the summary value. You can choose from <b><b> Default </b></b>, <b><b> None </b></b>, and options for numbers of decimal places (from ".0" to ".00000"). By default, Domo automatically determines the optimal number of decimal places for the gauge value. When you select <b><b> None </b></b>, the value is rounded to the nearest whole number. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Value Options > Negative Numbers </p></td><td colspan="1" rowspan="1"><p> Determines the format for negative numbers. </p><p> If you select <b><b> -100 </b></b>, negative values have a minus symbol affixed. If you select <b><b> (100) </b></b>, negative values are enclosed in parentheses. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Hide </p></td><td colspan="1" rowspan="1"><p> Hides the change value in the chart. (This is the <em> second </em> number that appears in the chart's built-in gauge. For example, in the screenshot of the chart at the top of this article, the value is -74.35%.) </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Value </p></td><td colspan="1" rowspan="1"><p> Specifies whether the change value is a percent change (default) or a difference in values. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Data </p></td><td colspan="1" rowspan="1"><p> Specifies whether the change value is derived from the first and last values in the chart (default) or the last two values in the chart. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Size </p></td><td colspan="1" rowspan="1"><p> Specifies the size of the change value in the chart. You can choose from <b> Medium </b> (default) or <b> Small </b>. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Size > Direction Indicator </p></td><td colspan="1" rowspan="1"><p> Specifies whether the symbol used to represent change in the change value is an arrow (default), a curved arrow, or a triangle. Examples of all three of these are shown at right. </p></td><td colspan="1" rowspan="1"><p><a target="_blank" title="/@api/deki/files/5431/sparkline_arrow1.png"><img alt="sparkline_arrow1.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7A.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=f0962d92e844ec28199b0d038a5a40ca" width="294" height="38" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7A.png" /></a></p><p><a target="_blank" title="/@api/deki/files/5430/sparkline_arrow2.png"><img alt="sparkline_arrow2.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7M.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=b5e107276f11fc1ec4d4be890d8c3451" width="292" height="37" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7M.png" /></a></p><p><a target="_blank" title="/@api/deki/files/5429/sparkline_arrow3.png"><img alt="sparkline_arrow3.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7K.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=6f75e5c99b34906462448acf971dacbe" width="292" height="37" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7K.png" /></a></p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Values > Reverse Color Direction </p></td><td colspan="1" rowspan="1"><p> By default, if your change value is positive, the value appears green; if it is negative, the value appears red. By setting the <b> Reverse Color Direction </b> property, you can switch this default behavior. This is useful for gauges in which low values are ideal (such as a gauge that keeps track of workplace accidents). </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Value Format </p></td><td colspan="1" rowspan="1"><p> Determines the general number format for your chart's change value. Options include <b><b> Number </b></b> (which includes no special formatting), <b><b> Currency </b></b> (in which a currency symbol is affixed), and <b><b> Percentage </b></b> (in which a percent symbol is affixed). </p><div class="mdx-embed"><Note><p><b> Note: </b> The <b> Number </b> and <b> Currency </b> options will <em> not </em> work unless you set <b> Change Value Options > Value </b> to <b> Value Change </b>. </p></Note>
</div></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Hover Format </p></td><td colspan="1" rowspan="1"><p> Determines the number format for your chart's hovers (i.e. the text that appears when you mouse over a data point in the chart). Options include <b><b> Number </b></b> (which includes no special formatting), <b><b> Currency </b></b> (in which a currency symbol is affixed), and <b><b> Percentage </b></b> (in which a percent symbol is affixed). <br /><br /> For more information about hovers, see <a href="/s/article/360043429693" target="_blank" title="Formatting Data Label and Hover Text in Your Chart"> Formatting Data Label and Hover Text in Your Chart </a>. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Hover Decimal Places </p></td><td colspan="1" rowspan="1"><p> Determines the number of decimal places that appear in values in your chart's hovers (i.e. the text that appears when you mouse over a data point in the chart). <br /><br /> For more information about hovers, see <a href="/s/article/360043429693" target="_blank" title="Formatting Data Label and Hover Text in Your Chart"> Formatting Data Label and Hover Text in Your Chart </a>. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Positive Color </p></td><td colspan="1" rowspan="1"><p> Specifies the color used when the degree of change in your chart is positive. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Change Value Options > Negative Color </p></td><td colspan="1" rowspan="1"><p> Specifies the color used when the degree of change in your chart is negative. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Line Options > Style </p></td><td colspan="1" rowspan="1"><p> Determines whether the line in your chart is angular (<b> Plain </b> ) or curved. <b> Plain </b> is the default. </p></td><td colspan="1" rowspan="1"><p> — </p></td></tr><tr><td colspan="1" rowspan="1"><p> Line Options > Thickness </p></td><td colspan="1" rowspan="1"><p> Determines whether the line in your chart is thin (default), medium, or thick. The example at right shows a Spark Line chart in which <b> Thick </b> has been selected. </p></td><td colspan="1" rowspan="1"><p><a target="_blank" title="/@api/deki/files/5433/sparkline_thick.png"><img alt="sparkline_thick.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7N.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=39e3c87063c0e0d526f52829a3c1f075" width="800" height="377" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7N.png" /></a></p></td></tr><tr><td colspan="1" rowspan="1"><p> Line Options > Hide Area Fill </p></td><td colspan="1" rowspan="1"><p> Hides the area fill in the chart. The example at right shows a chart in which this has been done. </p></td><td colspan="1" rowspan="1"><p><a target="_blank" title="/@api/deki/files/5432/sparkline_no_fill.png"><img alt="sparkline_no_fill.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7B.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=0859f1634daff6105f9917069348b41e" width="800" height="377" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7B.png" /></a></p></td></tr></tbody></table>
