Step Line Chart
This chart type belongs to PowerCharts XT.
A step line chart is used to visualize trends for a particular event which is not continuous in nature. It is a specialized line chart which, unlike the usual line charts, does not use the shortest distance to connect two data points; instead, it uses vertical and horizontal lines to connect the data points in a series to form a step-like progression.
Essentially, trends are quite apparent from the general slope of a line chart. However, when the lines take distorted shapes for a specific segment of data points, it becomes very difficult to determine the drift. This is where the significance of a step line chart comes in. For a given set of data, where a line chart shows the generic deviation of the data points, a step line chart not only enables you to compare the magnitude and change in values at different points of the same series but also helps you discern the intermittent pattern of the trend at the same time.
{
"header": "Chart Anatomy",
"subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below are different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [
{
"itemHeader": "Step Line Chart",
"imgSrc": "step-line-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "36.5%",
"topPosition": "6.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "53%",
"topPosition": "12.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "90%",
"topPosition": "25%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "12%",
"topPosition": "64%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "52.5%",
"topPosition": "69%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "83.5%",
"topPosition": "63%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "7%",
"topPosition": "15%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "3.5%",
"topPosition": "36%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "73%",
"topPosition": "51.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "10",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "47.5%",
"topPosition": "81.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "11",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "53%",
"topPosition": "23.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "12",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "91.5%",
"topPosition": "5%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
}
]
},
{
"itemHeader": "Stacked Chart",
"imgSrc": "stacked-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "66%",
"topPosition": "8.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "42.5%",
"topPosition": "17%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "82%",
"topPosition": "30%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "34%",
"topPosition": "67%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "55%",
"topPosition": "72%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "72%",
"topPosition": "70%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "13%",
"topPosition": "68%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "7%",
"topPosition": "35%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "73%",
"topPosition": "51.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "10",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "47.5%",
"topPosition": "84.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "11",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "53%",
"topPosition": "23.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "12",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "84.5%",
"topPosition": "5%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
},
{
"annotationNumber": "13",
"annotationName": "Data Values",
"annotationDesc": "Data values are plot values, i.e. values of each data plot (line, column, bar, pie) displayed on the chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/data-values",
"leftPosition": "27%",
"topPosition": "22%",
"annotationLinks": []
}
]
},
{
"itemHeader": "Bar Chart",
"imgSrc": "bar-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "38.5%",
"topPosition": "2.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "63.5%",
"topPosition": "7.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "73%",
"topPosition": "38%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "32%",
"topPosition": "7%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "40%",
"topPosition": "12%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "22%",
"topPosition": "66%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "80%",
"topPosition": "72%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "47%",
"topPosition": "80%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Trendline",
"annotationDesc": "Trend lines are reference horizontal or vertical lines which help to interpret data.. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "65%",
"topPosition": "50%",
"annotationLinks": []
},
{
"annotationNumber": "10",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "43%",
"topPosition": "49%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "11",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "47.5%",
"topPosition": "93.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "12",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "53%",
"topPosition": "31.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "13",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "77.5%",
"topPosition": "3%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
}
]
},
{
"itemHeader": "Line Chart Anatomy",
"imgSrc": "line-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "64.5%",
"topPosition": "1%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "28.5%",
"topPosition": "7.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "20%",
"topPosition": "20%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "28%",
"topPosition": "70%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "51%",
"topPosition": "80%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "72%",
"topPosition": "76%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "5%",
"topPosition": "72%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "1%",
"topPosition": "20%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Trendline",
"annotationDesc": "Trend lines are reference horizontal or vertical lines which help to interpret data.. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "83%",
"topPosition": "40%",
"annotationLinks": []
},
{
"annotationNumber": "10",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "18%",
"topPosition": "46.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "11",
"annotationName": "Anchors",
"annotationDesc": "Each data point in a line/spline/area chart is represented by an anchor. Anchors help to identify the data point in the chart easily. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/anchors-and-lines",
"leftPosition": "86%",
"topPosition": "25%",
"annotationLinks": []
},
{
"annotationNumber": "12",
"annotationName": "Crossline",
"annotationDesc": "Cross line is a vertical line/area used as a quick reference for data plots. Learn more about it ",
"annotationDescLinkPath": "/dev/chart-guide/chart-configurations/cross-line",
"leftPosition": "49%",
"topPosition": "25%",
"annotationLinks": []
},
{
"annotationNumber": "13",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "47.5%",
"topPosition": "93.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "14",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "78%",
"topPosition": "53.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "15",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "91.5%",
"topPosition": "5%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
}
]
},
{
"itemHeader": "Area Chart Anatomy",
"imgSrc": "area-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "64.5%",
"topPosition": "1%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "28.5%",
"topPosition": "7.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "20%",
"topPosition": "20%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "28%",
"topPosition": "70%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "53%",
"topPosition": "80%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "72%",
"topPosition": "78%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "5%",
"topPosition": "72%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "1%",
"topPosition": "20%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Trendline",
"annotationDesc": "Trend lines are reference horizontal or vertical lines which help to interpret data.. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "49%",
"topPosition": "35%",
"annotationLinks": []
},
{
"annotationNumber": "10",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "18%",
"topPosition": "46.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "11",
"annotationName": "Anchors",
"annotationDesc": "Each data point in a line/spline/area chart is represented by an anchor. Anchors help to identify the data point in the chart easily. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/anchors-and-lines",
"leftPosition": "87%",
"topPosition": "23%",
"annotationLinks": []
},
{
"annotationNumber": "12",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "47.5%",
"topPosition": "93.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "13",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "78%",
"topPosition": "53.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "14",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "91.5%",
"topPosition": "5%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
}
]
},
{
"itemHeader": "Pie Chart Anatomy",
"imgSrc": "pie-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "67.5%",
"topPosition": "10%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "42.5%",
"topPosition": "20.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the pie/doughnut slices in a pie/doughnut chart, columns of the column chart, lines in a line chart.",
"annotationDescLinkPath": null,
"leftPosition": "40%",
"topPosition": "38%",
"annotationLinks": [{
"linkDesc": "You can customize the data plots, learn more about it ",
"linkPath": "/chart-guide/standard-charts/pie-and-doughnut-charts#customize-the-center-label-for-a-doughnut-chart"
}
]
},
{
"annotationNumber": "4",
"annotationName": "Data Labels",
"annotationDesc": "Data labels refers to the lables associated with each pie slcie. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/standard-charts/pie-and-doughnut-charts",
"leftPosition": "27%",
"topPosition": "60%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "Data Values",
"annotationDesc": "Data values refers to values associated with each pie slcie. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/standard-charts/pie-and-doughnut-charts",
"leftPosition": "70%",
"topPosition": "68%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "47.5%",
"topPosition": "83.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "7",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "64%",
"topPosition": "38.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "8",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "82.5%",
"topPosition": "12%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
}
]
},
{
"itemHeader": "Donut Chart Anatomy",
"imgSrc": "donut-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "67.5%",
"topPosition": "10%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "42.5%",
"topPosition": "20.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the pie/doughnut slices in a pie/doughnut chart, columns of the column chart, lines in a line chart.",
"annotationDescLinkPath": null,
"leftPosition": "40%",
"topPosition": "38%",
"annotationLinks": [{
"linkDesc": "You can customize the data plots, learn more about it ",
"linkPath": "/chart-guide/standard-charts/pie-and-doughnut-charts#customize-the-center-label-for-a-doughnut-chart"
}
]
},
{
"annotationNumber": "4",
"annotationName": "Data Labels",
"annotationDesc": "Data labels refers to the lables associated with each pie slcie. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/standard-charts/pie-and-doughnut-charts",
"leftPosition": "27%",
"topPosition": "60%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "Data Values",
"annotationDesc": "Data values refers to values associated with each pie slcie. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/standard-charts/pie-and-doughnut-charts",
"leftPosition": "70%",
"topPosition": "68%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "47.5%",
"topPosition": "83.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "7",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "64%",
"topPosition": "38.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "8",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "82.5%",
"topPosition": "12%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute exportEnabled, learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like server, client, auto for chart export, learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes, learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
}
]
}
]
}
}
Let's create our first step line chart where we will compare the revenue earned with the expense incurred in the last year. The step-like composition of the data segments gives an accurate representation of the revenue and expense for each month.
To create a multi-series step line chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render a step-line chart, setmsstepline.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of step-line chart.
A multi-series step line chart looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Revenue Vs Expense",
"subCaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"showXAxisLine": "1",
"numberprefix": "$",
"drawverticaljoints": "1",
"useforwardsteps": "0",
"divlineAlpha": "100"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesname": "Revenue",
"linethickness": "3",
"anchorradius": "3",
"data": [
{
"value": "374000"
},
{
"value": "350000"
},
{
"value": "380000"
},
{
"value": "340000"
},
{
"value": "398000"
},
{
"value": "326000"
},
{
"value": "448000"
},
{
"value": "379000"
},
{
"value": "355000"
},
{
"value": "374000"
},
{
"value": "348000"
},
{
"value": "402000"
}
]
},
{
"seriesname": "Expense",
"linethickness": "3",
"anchorradius": "3",
"data": [
{
"value": "100000"
},
{
"value": "115000"
},
{
"value": "135000"
},
{
"value": "150000"
},
{
"value": "110000"
},
{
"value": "98000"
},
{
"value": "118000"
},
{
"value": "197000"
},
{
"value": "228000"
},
{
"value": "249000"
},
{
"value": "229000"
},
{
"value": "208000"
}
]
}
]
}<chart theme="fusion" caption="Revenue Vs Expense" subcaption="Last year" xaxisname="Month" yaxisname="Amount (In USD)" showxaxisline="1" numberprefix="$" drawverticaljoints="1" useforwardsteps="0" divlinealpha="100">
<categories>
<category label="Jan" />
<category label="Feb" />
<category label="Mar" />
<category label="Apr" />
<category label="May" />
<category label="Jun" />
<category label="Jul" />
<category label="Aug" />
<category label="Sep" />
<category label="Oct" />
<category label="Nov" />
<category label="Dec" />
</categories>
<dataset seriesname="Revenue" linethickness="3" anchorradius="3">
<set value="374000" />
<set value="350000" />
<set value="380000" />
<set value="340000" />
<set value="398000" />
<set value="326000" />
<set value="448000" />
<set value="379000" />
<set value="355000" />
<set value="374000" />
<set value="348000" />
<set value="402000" />
</dataset>
<dataset seriesname="Expense" linethickness="3" anchorradius="3">
<set value="100000" />
<set value="115000" />
<set value="135000" />
<set value="150000" />
<set value="110000" />
<set value="98000" />
<set value="118000" />
<set value="197000" />
<set value="228000" />
<set value="249000" />
<set value="229000" />
<set value="208000" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'msstepline',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Revenue Vs Expense",
"subCaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"showXAxisLine": "1",
"numberprefix": "$",
"drawverticaljoints": "1",
"useforwardsteps": "0",
"divlineAlpha": "100"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Revenue",
"linethickness": "3",
"anchorradius": "3",
"data": [{
"value": "374000"
}, {
"value": "350000"
}, {
"value": "380000"
}, {
"value": "340000"
}, {
"value": "398000"
}, {
"value": "326000"
}, {
"value": "448000"
}, {
"value": "379000"
}, {
"value": "355000"
}, {
"value": "374000"
}, {
"value": "348000"
}, {
"value": "402000"
}]
}, {
"seriesname": "Expense",
"linethickness": "3",
"anchorradius": "3",
"data": [{
"value": "100000"
}, {
"value": "115000"
}, {
"value": "135000"
}, {
"value": "150000"
}, {
"value": "110000"
}, {
"value": "98000"
}, {
"value": "118000"
}, {
"value": "197000"
}, {
"value": "228000"
}, {
"value": "249000"
}, {
"value": "229000"
}, {
"value": "208000"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The data structure above is similar to that of any multi-series chart in the FusionCharts Suite XT, except for the type attribute.
Click here to edit the step line chart.
Hide the Vertical Lines
By default, the step line chart displays the vertical joins - vertical lines that run through the edges of the horizontal planes thereby joining them in different steps. However, you can also disjoin the horizontal segments by hiding the vertical lines from the chart.
To hide the vertical lines in your chart, set the drawVerticalJoins attribute to 0.
Refer to the code given below:
{
"chart": {
"drawVerticalJoins": "0"
}
}A step line chart rendered without the vertical joins looks like this:
FusionCharts will load here..
Click here to edit the step line chart.
Use Forward Steps
For a step line chart, you can configure the direction of progression of the line segments. By default, the chart is rendered in the forward progressive mode - the line plots are horizontally depicted, and then vertical lines are drawn to connect the data plots. To disable the forward progressive mode, set the useForwardSteps attribute to 0.
Refer to the code given below:
{
"chart": {
"useForwardSteps": "0"
},
}A step line chart rendered with the forward progressive mode disabled looks like this:
FusionCharts will load here..
Click here to edit the step line chart.
Compare this chart with the step line chart shown above and see the difference in how each is rendered.