Advanced Chart Formatting

This page provides a list of supported Advanced Chart Formatting commands.

Jaspersoft HTML5 Javascript Charts are defined with default formatting. While the Ad Hoc Designer provides some basic formatting control via properties that are selected from the Chart Formatting Dialog, in some cases you may require more control over a chart's appearance. Starting with Jaspersoft Version 6.2, the Advanced Properties Tab is designed to let you enter formatting commands:

💡Tip: placing two slashes at the beginning of a property causes it to be commented out. Use this "trick" to disable a property without having to delete it.

Notes:

3D Charting options are not currently supported.
Property names and values are case sensitive. Incorrect casing will cause a property to be ignored.
If the Properties names or 'Values' are input incorrectly, the chart will not change.

Property	Value	Description
chart.alignTicks	true or false	When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks. This can be prevented by setting *alignTicks* to false. If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting *gridLineWidth* to 0. Defaults to *true. For example, value set to: false* causes a chart to draw as follows:
chart.backgroundColor	"color"	Sets the back ground color of the entire chart. The color value may be a color name (such as 'Black') or a hexadecimal code enclosed in double quotes. For example, value set to: "Grey" causes a chart to draw as follows: Notes: Color Names and Hex Codes should not contain spaces. Hex codes should begin with #. If an unknown color name or code is defined, a black back ground is displayed. For a list of color hex codes, see: https://simple.wikipedia.org/wiki/Web_color
chart.borderColor	"color"	The color of the outer chart border. Defaults to *#4572A7. For example, value set to: "Green"* causes a chart to draw as follows: Notes: You must include *chart.borderWidth* in order to work
chart.borderRadius	Value	The corner radius of the outer chart border. Defaults to 0. For example, value set to: 5 causes a chart to draw as follows: Notes: You must include and ;*chart.borderWidth* in order to work You can add *chart.borderColor* to change border color
chart.borderWidth	Value	The pixel width of the outer chart border. Defaults to 0. For example, value set to: 2 causes a chart to draw as follows: Notes: You can add *chart.borderColor* to change border color
chart.plotBackgroundColor	"color"	Sets the back ground color of the chart plot area. The color value may be a color name (such as 'Black') or a hexadecimal code enclosed in double quotes. For example, value set to: "Black" causes a chart to draw as follows: Notes: Color Names and Hex Codes should not contain spaces. Hex codes should begin with #. If an unknown color name or code is defined, a black back ground is displayed. For a list of color hex codes, see: https://simple.wikipedia.org/wiki/Web_color
chart.height	Value	An explicit height for the chart. By default the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0. For example, value set to: 200 causes a chart to draw as follows:
chart.ignoreHiddenSeries	true or false	If true, the axes will scale to the remaining visible series once one series is hidden. If false, hiding and showing a series will not affect the axes or the other series. For stacks, once one series within the stack is hidden, the rest of the stack will close in around it even if the axis is not affected. For example, value set to: true causes a chart to draw as follows:
chart.inverted	true or false	Whether to invert the axes so that the x axis is vertical and y axis is horizontal. For example, value set to: true causes a Spline chart to draw as follows:
chart.margin	Array	The margin between the outer edge of the chart and the plot area. The numbers in the array designate top, right, bottom and left respectively. Use the options marginTop, marginRight, marginBottom and marginLeft for shorthand setting of one option. Since version 2.1, the margin is 0 by default. The actual space is dynamically calculated from the offset of axis labels, axis title, title, subtitle and legend in addition to the spacingTop, spacingRight, spacingBottom and spacingLeft options. Defaults to *[null]. For example, value set to: [100, 80, 60, 80]* causes a chart to draw as follows:
chart.marginBottom	Value	The margin between the bottom outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also. For example, value set to: 100 causes a chart to draw as follows:
chart.marginLeft	Value	The margin between the left outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also *spacingLeft. For example, value set to: 150* causes a chart to draw as follows:
chart.marginRight	Value	The margin between the right outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also *spacingRight. For example, value set to: 270* causes a chart to draw as follows:
chart.marginTop	Value	The margin between the top outer edge of the chart and the plot area. Use this to set a fixed pixel value for the margin as opposed to the default dynamic margin. See also *spacingTop*. For example, value set to: 30 causes a chart to draw as follows:
chart.options3d.enabled	true or false	Supported as of Version 6.2.1. Causes a chart to be drawn in 3d. Notes: Works only on Pie, Column, and Bar Chart types Addtional formatting commands are required to set the axis angle and chart depth: chart.options3d.alpha plotOptions.pie.depth For example, a 3d pie chart: chart.options3d.enabled with a value of true chart.options3d.alpha with a value of 45 plotOptions.pie.depth with a value of 45 causes the following chart to be drawn: For example, a 3d column chart: chart.options3d.enabled with a value of true chart.options3d.alpha with a value of 20 causes the following chart to be drawn:
chart.panKey	String	Allows setting a key to switch between zooming and panning. For example, value set to: "shift"
chart.panning	true or false	Allow panning in a chart. Best used with *panKey* to combine zooming and panning. Defaults to *false. For example, value set to: true*
chart.plotBackgroundImage	String	The URL for an image to use as the plot background. To set an image as the background for the entire chart, set a CSS background image to the container element. Note that for the image to be applied to exported charts, its URL needs to be accessible by the server. For example, value set to: "insert URL" causes a chart to draw as follows:
chart.plotBorderColor	"color"	The color of the inner chart or plot area border. Defaults to *#C0C0C0. For example, value set to: "blue"* causes a chart to draw as follows:
chart.plotBorderWidth	Value	The pixel width of the plot area border. Defaults to 0, For example, value set to: 2 causes a chart to draw as follows:
chart.polar	true or false	When true, cartesian charts like line, spline, area and column are transformed into the polar coordinate system. Requires highcharts-more.js . Defaults to false . For example, value set to: true causes a chart to draw as follows:
chart.reflow	true or false	Whether to reflow the chart to fit the width of the container div on resizing the window. Defaults to true . For example, value set to: false causes a chart to draw as follows:
chart.resetZoomButton.position.x chart.resetZoomButton.position.y	Value	Affects the position of the "Reset zoom" button. This is an object that can hold the properties align, verticalAlign, x and y. For example, value set to: -100 10 causes a chart to draw as follows:
chart.resetZoomButton.theme	Object	A collection of attributes for the button. The object takes SVG attributes like fill, stroke, stroke-width or r, the border radius. The theme also supports style, a collection of CSS properties for the text. Equivalent attributes for the hover state are given in theme.states.hover. For example, define the property as follows: chart.resetZoomButton.theme.fill Set value to: "red" causes a chart to draw as follows:
chart.selectionMarkerFill	"color"	The background color of the marker square when selecting (zooming in on) an area of the chart. Defaults to rgba(69,114,167,0.25). For example, value set to: "blue" causes a chart to draw as follows:
chart.showAxes	true or false	Whether to show the axes initially. This only applies to empty charts where series are added dynamically, as axes are automatically added to cartesian series. Defaults to false. For example, value set to: false causes a chart to draw as follows:
chart.spacing	Array	The distance between the outer edge of the chart and the content, like title, legend, axis title or labels. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option. Defaults to [10, 10, 15, 10]. For example, value set to: [20, 20, 25, 20] causes a chart to draw as follows:
chart.style	CSSObject	Additional CSS styles to apply inline to the container div. Note that since the default font styles are applied in the renderer, it is ignorant of the individual chart options and must be set globally. Defaults to: style: { fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font fontSize: '12px' } Defaults to {"fontFamily":""Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"} For example, value set to: 'serif' causes a chart to draw as follows:
chart.type	"waterfall" or "gauge" or "solidgauge" in Version 6.2.1	The default series type for the chart. Use this to create a "waterfall" chart or a "gauge". For example, value set to: "waterfall" causes a chart to draw as follows: Notes: Drawing Gauges requires addtional formatting commands to create the desired appearance. For example, a SolidGauge, uses the following properties: chart.type with a value of "solidgauge" pane.startAngle with a value of -90 pane.endAngle with a value of 90 pane.background.innerRadius with a value of "60%" yAxis.min with a value of 0 yAxis.minorTickInterval with a value of null yAxis.lineWidth with a value of 0 yAxis.tickWidth with a value of 0 plotOptions.solidgauge.dataLabels.borderWidth with a value of 0 pane.background.shape with a value of "arc" yAxis.max with a value of 100000 plotOptions.solidgauge.dataLabels.y with a value of -40 colors with a value of ["skyblue"] yAxis.labels.y with a value of 12 yAxis.tickPixelInterval with a value of 10000 causes a chart to draw as follows:
chart.width	Value	An explicit width for the chart. By default the width is calculated from the offset width of the containing element. For example, value set to: 350 causes a chart to draw as follows:
chart.zoomType	"Value"	Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy. For example, value set to: "xy"
colors	["Color1", "Color2", "ColorN"']	A comma seperated list of color values for chart series data. The color value may be a color name (such as 'Blue', 'LightSeaGreen', 'Purple') or hexadecimal codes enclosed in double quotes. For example, value set to: ["red", "DarkTurquoise", "blue", "green", "magenta", "purple", "black", "yellow", "brown", "grey", "gold", "orange", "#7cb5ec"] If there are more series in the chart than specfied in the color list, then default colors are used for the remainig chart series: Notes: Color Names and Hex Codes should not contain spaces. Hex codes should begin with #. If an unknown color name or code is defined, a black series value is returned. Certain Chart Types do not work with the Colors property, for example: Gauges, Heat Maps, and Tree Maps For a list of color hex codes, see: https://simple.wikipedia.org/wiki/Web_color
legend.align	"left" or "right" or "center"	Sets the left-to-right alignment of a chart legend. For example, value set to: "left" causes the following chart to appear:
legend.backgroundColor	"color"	The background color of the legend. For example, value set to: "blue" causes a chart to draw as follows:
legend.borderColor	color	The color of the drawn border around the legend. Defaults to #909090. For example, value set to: "red" causes a chart to draw as follows:
legend.borderRadius	Value	The border corner radius of the legend. Defaults to 0. For example, value set to: 10 causes a chart to draw as follows:
legend.borderWidth	Value	The width of the drawn border around the legend. Defaults to 0. For example, value set to: 0 causes a chart to draw as follows:
legend.enabled	true or false	Enable or disable the legend. Defaults to true. For example, value set to: false causes a chart to draw as follows:
legend.floating	true or false	When the legend is floating, the plot area ignores it and is allowed to be placed below it. Defaults to false. For example, value set to: true causes a chart to draw as follows:
legend.itemDistance	Value	In a legend with horizontal layout, the itemDistance defines the pixel distance between each item. Defaults to 20. For example, value set to: 50 causes a chart to draw as follows:
legend.itemHiddenStyle.color	CSSObject	CSS styles for each legend item when the corresponding series or point is hidden. Only a subset of CSS is supported, notably those options related to text. Properties are inherited from style unless overridden here. Defaults to: itemHiddenStyle: { color: '#CCC' For example, value set to: "green" causes a chart to draw as follows:
legend.itemHoverStyle.color	CSSObject	CSS styles for each legend item in hover mode. Only a subset of CSS is supported, notably those options related to text. Properties are inherited from style unless overridden here. Defaults to: itemHoverStyle: {color: '#000'} For example, value set to: "SandyBrown" causes a chart to draw as follows:
legend.itemMarginBottom	Value	The pixel bottom margin for each legend item. Defaults to 0. For example, value set to: 4 causes a chart to draw as follows:
legend.itemMarginTop	Value	The pixel top margin for each legend item. Defaults to 0. For example, value set to: 5 causes a chart to draw as follows:
legend.itemStyle.color	CSSObject	CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" } For example, value set to: "gray" causes a chart to draw as follows:
legend.itemStyle.fontSize	CSSObject	CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" } For example, value set to: "16px" causes a chart to draw as follows:
legend.itemStyle.fontWeight	CSSObject	CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text. Defaults to { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" } For example, value set to: "bold" causes a chart to draw as follows:
legend.itemWidth	Value	The width for each legend item. This is useful in a horizontal layout with many items when you want the items to align vertically. For example, value set to: 180 causes a chart to draw as follows:
legend.layout	String	The layout of the legend items. Can be one of "horizontal" or "vertical". Defaults to horizontal. For example, value set to: "vertical" causes a chart to draw as follows:
legend.navigation.activeColor	"color"	The color for the active up or down arrow in the legend page navigation. Defaults to #3E576F. "#9FF084" causes a chart to draw as follows:
legend.navigation.animation	true or false	How to animate the pages when navigating up or down. A value of true applies the default navigation given in the chart.animation option. Additional options can be given as an object containing values for easing and duration. . Defaults to true. For example, value set to: false causes a chart to draw as follows:
legend.navigation.arrowSize	Value	The pixel size of the up and down arrows in the legend paging navigation. Defaults to 12. For example, value set to: 16
legend.navigation.inactiveColor	"color"	The color of the inactive up or down arrow in the legend page navigation. Defaults to #CCC. For example, value set to: "red"
legend.navigation.style.fontWeight	CssObject	Text styles for the legend page navigation. For example, value set to: "bold" causes a chart to draw as follows:
legend.padding	Value	The inner padding of the legend box. Defaults to 8. For example, value set to: 4 causes a chart to draw as follows:
legend.reversed	true or false	Whether to reverse the order of the legend items compared to the order of the series or points as defined in the configuration object. Defaults to false. For example, value set to: true causes a chart to draw as follows:
legend.rtl	true or false	Whether to show the symbol on the right side of the text rather than the left side. This is common in Arabic and Hebraic. Defaults to false. For example, value set to: true causes a chart to draw as follows:
legend.shadow	true or false \| Object	Whether to apply a drop shadow to the legend. A backgroundColor also needs to be applied for this to take effect. Since 2.3 the shadow can be an object configuration containing color, offsetX, offsetY, opacity and width. Defaults to false. For example, value set to: true causes a chart to draw as follows:
legend.symbolHeight	Value	The pixel height of the symbol for series types that use a rectangle in the legend. Defaults to the font size of legend items. For example, value set to: 4 causes a chart to draw as follows:
legend.symbolPadding	Value	The pixel padding between the legend item symbol and the legend item text. Defaults to 5. For example, value set to: 12 causes a chart to draw as follows:
legend.symbolRadius	Value	The border radius of the symbol for series types that use a rectangle in the legend. Defaults to 0. For example, value set to: 10 causes a chart to draw as follows:
legend.symbolWidth	Value	The pixel width of the legend item symbol. Defaults to 16. For example, value set to: 30 causes a chart to draw as follows:
legend.title.style.fontSize	CSSObject	Generic CSS styles for the legend title. Defaults to {"fontWeight":"bold"}. For example, value set to: 20
legend.useHTML	true or false	Whether to use HTML to render the legend item texts. Prior to 4.1.7, when using HTML, legend.navigation was disabled. For example, value set to: true
legend.verticalAlign	"top" or "bottom" or "center"	Sets the top-to-bottom alignment of a chart legend. For example, value set to: "top" causes the following chart to appear:
legend.width	Value	The width of the legend box. For example, value set to: 75 causes a chart to draw as follows:
legend.backgroundColor	"color"	Sets the background color of the chart legend. For example, value set to: "silver" causes the following chart to appear: Notes: Color Names and Hex Codes should not contain spaces. Hex codes should begin with #. If an unknown color name or code is defined, a black background is displayed. For a list of color hex codes, see: https://simple.wikipedia.org/wiki/Web_color
legend.title.text	String	Displays a legend tile. For example, value set to: Key: causes the following chart to appear:
legend.x	Value	The x offset of the legend relative to its horizontal alignment align within chart.spacingLeft and chart.spacingRight. Negative x moves it to the left, positive x moves it to the right. Defaults to 0. For example, value set to: -105 causes a chart to draw as follows:
legend.y	Value	The vertical offset of the legend relative to it's vertical alignment verticalAlignwithin chart.spacingTop and chart.spacingBottom. Negative y moves it up, positive y moves it down. Defaults to 0. For example, value set to: 20 causes a chart to draw as follows:
pane.background.backgroundColor	"color"	For example, value set to: "red"
pane.background.shape	String	For example, value set to: "arc"
pane.background.innerWidth	Value	For example, value set to: 30
pane.background.outerWidth	Value	For example, value set to: 20
pane.background.borderWidth	Value	For example, value set to: 10
pane.background.borderColor	"color"	For example, value set to: "blue"
pane.endAngle	Value	The end angle of the polar X axis or gauge value axis, given in degrees where 0 is north. Defaults to startAngle + 360. For example, value set to: 85 causes a chart to draw as follows:
pane.size	Value \| String	The size of the pane, either as a number defining pixels, or a percentage defining a percentage of the plot are. Defaults to 85%. For example, value set to: "70%" causes a chart to draw as follows:
pane.startAngle	Value	The start angle of the polar X axis or gauge axis, given in degrees where 0 is north. Defaults to 0. For example, value set to: -85 causes a chart to draw as follows:
plotOptions.gauge.dataLabels.style.fontSize	CSSObject	Styles for the label. Defaults to {"color": "contrast", "fontSize": "11px", "fontWeight": "bold", "textShadow": "0 0 6px contrast, 0 0 3px contrast" } For example, value set to: "15px"
plotOptions.gauge.dataLabels.y	Value	The y position offset of the label relative to the center of the gauge. Defaults to 15. For example, value set to: 15
plotOptions.gauge.dataLabels.enabled	Boolean	Enable or disable the data labels. Defaults to false. For example, value set to: FALSE causes a chart to draw as follows:
plotOptions.gauge.dial.radius	String	The radius or length of the dial, in percentages relative to the radius of the gauge itself. Defaults to 80%. For example, value set to: "100%" causes a chart to draw as follows:
plotOptions.gauge.dial.borderWidth	Value	The width of the gauge dial border in pixels. Defaults to 0. For example, value set to: 0 causes a chart to draw as follows:
plotOptions.gauge.dial.borderColor	"color"	The border color or stroke of the gauge's dial. By default, the borderWidth is 0, so this must be set in addition to a custom border color. Defaults to silver. For example, value set to: "black" causes a chart to draw as follows:
plotOptions.gauge.dial.baseWidth	Value	The pixel width of the base of the gauge dial. The base is the part closest to the pivot, defined by baseLength. Defaults to 3. For example, value set to: 4 causes a chart to draw as follows:
plotOptions.gauge.dial.topWidth	Value	The width of the top of the dial, closest to the perimeter. The pivot narrows in from the base to the top. Defaults to 1. For example, value set to: 1 causes a chart to draw as follows:
plotOptions.gauge.dial.baseLength	String	The length of the dial's base part, relative to the total radius or length of the dial. Defaults to 70%. For example, value set to: "90%" causes a chart to draw as follows:
plotOptions.gauge.dial.rearLength	String	The length of the dial's rear end, the part that extends out on the other side of the pivot. Relative to the dial's length. Defaults to 10%. For example, value set to: "5%" causes a chart to draw as follows:
plotOptions.pie.innerSize	"Value"	Sets the size of a hole in Pie Charts. Value can either be a pixel number or % of Pie enclosed in double quotes. For example, a value of: "50%" causes the following chart to appear:
plotOptions.series.dataLabels.enabled	true or false	Displays data values on a chart. For example, value set to: true causes a chart to draw as follows:
plotOptions.series.dataLabels.format	*{format string}*	Applies a formatting to data labels. For example: {point.y:.2f} causes data values to display with 2 decimals {point.y:,.0f} causes data vlaues to display with thousands seperator and zero decimals and causes the chart tp draw as follows: Another example for percent bar chart: {point.percentage:.1f} % causes a chart to draw as follows: Notes: Requires the plotOptions.series.dataLabels.enabled format property to be set
plotOptions.series.dataLabels.rotation	Value	Rotates data labels from 0 to 360 degrees. For example, value set to: 270 causes a chart to draw as follows: Notes: Requires the plotOptions.series.dataLabels.enabled format property to be set
plotOptions.series.dataLabels.x plotOptions.series.dataLabels.y	Value	Defines datalabel offwet position from either X or Y axis. For example, to change the label position on the Y-Axis, use plotOptions.series.dataLabels.y with a value of: -20 causes a chart to draw as follows:
plotOptions.series.pointWidth	Value	For example, value set to: 17 causes a chart to draw as follows:
series.shadow	true or false	Whether to apply a drop shadow to the graph line. Since 2.3 the shadow can be an object configuration containing color, offsetX, offsetY, opacity and width. Defaults to false. For example, value set to: false causes a chart to draw as follows:
series.borderWidth	Value	For example, value set to: 0 causes a chart to draw as follows:
series.dataLabels.enabled	true or false	Displays data values on a chart. For example, value set to: true as of Version 6.3 causes a Pie chart to draw as follows:
series.dataLabels.format	*{format string}*	Applies a formatting to data labels. For example: {point.name} causes the series name to be displayed {point.percentage:.0f} causes the data vlaue to be dispplayed as a percent of the total As of Version 6.3, Pie chart label formatting is supported, for example: {point.name}: {point.percentage:.1f}% causes a Pie chart to draw as follows:
series.groupPadding	Value	For example, value set to: -4 causes a chart to draw as follows:
series.pointPadding	Value	For example, value set to: -.5 causes a chart to draw as follows:
subtitle.text title.text	String	Displays a Chart Title or Subtitle text string. For example, a title and subtitle values of: Fresh Food Sales Performance State Tree Map by Demographic causes the following to appear in a chart:
title.text	"Value"	The title of the chart. To disable the title, set the text to null. Defaults to Chart title. For example, value set to: "Title" causes a chart to draw as follows:
tooltip.followPointer	true or false	Whether the tooltip should follow the mouse as it moves across columns, pie slices and other point types with an extent. By default it behaves this way for scatter, bubble and pie series by override in the plotOptions for those series types. For touch moves to behave the same way, followTouchMove must be true also. Defaults to false. For example, value set to: true causes a chart to draw as follows:
tooltip.footerFormat	"Value"	A string to append to the tooltip format. Defaults to false. For example, value set to: </table> causes a chart to draw as follows:
tooltip.headerFormat	"Value"	The HTML of the tooltip header line. Variables are enclosed by curly brackets. Available variables are point.key, series.name, series.color and other members from the point and series objects. The point.key variable contains the category name, x value or datetime string depending on the type of axis. For datetime axes, the point.key date format can be set using tooltip.xDateFormat.Defaults to <span style="font-size: 10px">{point.key}</span><br/>. For example, value set to: <table> causes a chart to draw as follows:
tooltip.pointFormat	"Value"	The HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables are point.x, point.y, series.name and series.color and other properties on the same form. Furthermore, point.y can be extended by the tooltip.valuePrefix and tooltip.valueSuffix variables. This can also be overridden for each series, which makes it a good hook for displaying units.Defaults to <span style="color:{point.color}">u25CF</span> {series.name}: <b>{point.y}</b><br/> For example, value set to: "" causes a chart to draw as follows:
tooltip.useHTML	true or false	Use HTML to render the contents of the tooltip instead of SVG. Using HTML allows advanced formatting like tables and images in the tooltip. It is also recommended for rtl languages as it works around rtl bugs in early Firefox. Defaults to false. For example, value set to: true causes a chart to draw as follows:
xAxis.alternateGridColor	Value	When using an alternate grid color, a band is painted across the plot area between every other grid line. For example, value set to: "false" causes a chart to draw as follows:
xAxis.gridLineWidth	Value	The width of the grid lines extending the ticks across the plot area. Defaults to 0. For example, value set to: causes a chart to draw as follows:
xAxis.labels.enabled	true or false	Enable or disable the axis labels. Defaults to true. For example, value set to: false causes a chart to draw as follows:
xAxis.tickWidth	Value	The pixel width of the major tick marks. Defaults to 1. For example, value set to: 0 causes a chart to draw as follows:
xAxis.title.margin	Value	The pixel distance between the axis labels or line and the title. Defaults to 0 for horizontal axes, 10 for vertical. For example, value set to: 16 causes a chart to draw as follows:
xAxis.title.style.fontSize	"Value"	For example, value set to: "20px" causes a chart to draw as follows:
xAxis.title.style.letterSpacing	"Value"	For example, value set to: "3px" causes a chart to draw as follows:
xAxis.title.text	Value	The actual text of the axis title. It can contain basic HTML text markup like <b>, <i> and spans with style. For example, value set to: "title" causes a chart to draw as follows:
xAxis.type	Value	The type of axis. Can be one of "linear", "logarithmic", "datetime" or "category". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart's series are used for categories, if not a categories array is defined. Defaults to linear. For example, value set to: causes a chart to draw as follows:
yAxis.alternateGridColor xAxis.alternateGridColor	"color"	Sets alternating bands of grid colors along either the x-axis or y-axis of the chart plot area. The color value may be a color name (such as 'Black') or a hexadecimal code enclosed in double quotes. For example, a y-axis value set to: "Pink" causes a chart to draw as follows: Notes: Color Names and Hex Codes should not contain spaces. Hex codes should begin with #. If an unknown color name or code is defined, a black series value is returned. For a list of color hex codes, see: https://simple.wikipedia.org/wiki/Web_color
yAxis.gridLineWidth xAxis.gridLineWidth	Value	Sets the width of chart axis gridlines in pixels. For example, a y-axis value set to: 0 causes the following chart to appear:
yAxis.labels.distance	Value	Angular gauges and solid gauges only. The label's pixel distance from the perimeter of the plot area. Defaults to 15. For example, value set to: 20 causes a chart to draw as follows:
yAxis.labels.rotation	Value	Rotation of the labels in degrees. Defaults to 0. For example, value set to: "auto" causes a chart to draw as follows:
yAxis.lables.style.fontSize	CSSObject	CSS styles for the label. Use whiteSpace: 'nowrap' to prevent wrapping of category labels. Use textOverflow: 'none' to prevent ellipsis (dots). Defaults to {"color":"#6D869F","fontWeight":"bold"} For example, value set to: "12px" causes a chart to draw as follows:
yAxis.min	Value	The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down. The automatically calculated minimum value is also affected by floor, minPadding, minRange as well as series.threshold and series.softThreshold. For example, value set to: 0 causes a chart to draw as follows:
yAxis.max	Value	The maximum value of the axis. If null, the max value is automatically calculated. If the endOnTick option is true, the max value might be rounded up. The actual maximum value is also influenced by chart.alignTicks. For example, value set to: 300000 causes a chart to draw as follows:
yAxis.minorTickPosition	String	The position of the minor tick marks relative to the axis line. Can be one of inside and outside. Defaults to outside. For example, value set to: "inside" causes a chart to draw as follows:
yAxis.tickPosition	String	The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to outside. For example, value set to: "outside" causes a chart to draw as follows:
yAxis.title.margin	Value	The pixel distance between the axis labels and the title. Positive values are outside the axis line, negative are inside. Defaults to 40. For example, value set to: 8 causes a chart to draw as follows:
yAxis.title.style.fontSize	"Value"	CSS styles for the title. When titles are rotated they are rendered using vector graphic techniques and not all styles are applicable. Defaults to { "color": "#707070", "fontWeight": "bold" } For example, value set to: "18px" causes a chart to draw as follows:
yAxis.title.text	Value	The actual text of the axis title. Horizontal texts can contain HTML, but rotated texts are painted using vector techniques and must be clean text. The Y axis title is disabled by setting the text option to null. Defaults to Values. For example, value set to: "Store Sales" causes a chart to draw as follows:
yAxis.type xAxis.type	"logarithmic" "datetime" "category" "logarithmic" or "datetime"	The type of axis. Can be one of "linear", "logarithmic", "datetime" or "category". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart's series are used for categories, if not a categories array is defined. For example, the y-axis value set to: "logarithmic" causes a chart to draw with a logarithmic scale y-axis as follows:

Recommended Comments

sadakar 1

Posted November 21, 2018

- Share this comment

Highly useful in studio properties as well.

Link to comment

Share on other sites

luizgustavo-fl 0

Posted October 7, 2020

in version 6.13 where I can find this Chart Formatting Dialog

djohnson53 0

I would think that v6.13 would be covered by this page.

leonardo.repolust 0

Posted March 31, 2021

Hi,

I have an adhoc diagramm with 2 parameter on the xAxis but I only want to show 1 of them, but I need both of them to have the right sorting and Data, how can i make the labels of one of the invisible?

Advanced Chart Formatting

Notes:

chart.alignTicks

chart.backgroundColor

chart.borderColor

chart.borderRadius

chart.borderWidth

chart.plotBackgroundColor

chart.height

chart.ignoreHiddenSeries

chart.inverted

chart.margin

chart.marginBottom

chart.marginLeft

chart.marginRight

chart.marginTop

chart.options3d.enabled

chart.panKey

chart.panning

chart.plotBackgroundImage

chart.plotBorderColor

chart.plotBorderWidth

chart.polar

chart.reflow

chart.resetZoomButton.position.x chart.resetZoomButton.position.y

chart.resetZoomButton.theme

chart.selectionMarkerFill

chart.showAxes

chart.spacing

chart.style

chart.type

chart.width

chart.zoomType

colors

legend.align

legend.backgroundColor

legend.borderColor

legend.borderRadius

legend.borderWidth

legend.enabled

legend.floating

legend.itemDistance

legend.itemHiddenStyle.color

legend.itemHoverStyle.color

legend.itemMarginBottom

legend.itemMarginTop

legend.itemStyle.color

legend.itemStyle.fontSize

legend.itemStyle.fontWeight

legend.itemWidth

legend.layout

legend.navigation.activeColor

legend.navigation.animation

legend.navigation.arrowSize

legend.navigation.inactiveColor

legend.navigation.style.fontWeight

legend.padding

legend.reversed

legend.rtl

legend.shadow

legend.symbolHeight

legend.symbolPadding

legend.symbolRadius

legend.symbolWidth

legend.title.style.fontSize

legend.useHTML

legend.verticalAlign

legend.width

legend.backgroundColor

legend.title.text

legend.x

legend.y

pane.background.backgroundColor

pane.background.shape

pane.background.innerWidth

pane.background.outerWidth

pane.background.borderWidth

pane.background.borderColor

pane.endAngle

pane.size

chart.resetZoomButton.position.x
chart.resetZoomButton.position.y