- Chart Gallery
- Line Charts
- Line Chart
Line Chart
{
"chart": {
"zIndex": 0,
"enabled": true,
"type": "line",
"title": {
"zIndex": 80,
"enabled": true,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Trend of Sales of the Most Popular Products of ACME Corp.",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"positionMode": "point",
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 20,
"top": 10,
"bottom": 5,
"right": 20
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {},
"animation": {
"enabled": true,
"duration": 1000
},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"legend": {
"zIndex": 200,
"enabled": true,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "bottom",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "...",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"inverted": false,
"itemsLayout": "horizontal",
"iconSize": 15,
"width": null,
"height": null,
"maxWidth": null,
"maxHeight": null,
"position": "top",
"positionMode": "outside",
"drag": false,
"itemsFormat": null,
"titleFormat": null,
"itemsHAlign": "left",
"itemsSpacing": 15,
"itemsSourceMode": "default",
"hoverCursor": "pointer",
"iconTextSpacing": 5,
"align": "center",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"enabled": false
},
"title": {
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Title text",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"titleSeparator": {
"zIndex": 1,
"enabled": false,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"paginator": {
"zIndex": 30,
"enabled": true,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"orientation": "right",
"layout": "horizontal",
"background": {
"enabled": false
},
"padding": {
"left": 5,
"top": 0,
"bottom": 0,
"right": 0
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
}
},
"tooltip": {
"enabled": false,
"title": {
"zIndex": 1,
"enabled": false,
"maxLength": null,
"fontSize": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
}
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "by-x",
"selectionMode": "multi-select"
},
"defaultSeriesType": "line",
"maxBubbleSize": "20%",
"minBubbleSize": "5%",
"maxPointWidth": "100%",
"minPointLength": 0,
"baseline": 0,
"palette": {
"type": "distinct",
"items": [
"#64b5f6",
"#1976d2",
"#ef6c00",
"#ffd54f",
"#455a64",
"#96a6a6",
"#dd2c00",
"#00838f",
"#00bfa5",
"#ffa000"
]
},
"markerPalette": {
"items": [
"circle",
"diamond",
"square",
"triangle-down",
"triangle-up",
"diagonal-cross",
"pentagon",
"cross",
"v-line",
"star5",
"star4",
"trapezium",
"star7",
"star6",
"star10"
]
},
"hatchFillPalette": {
"items": [
{
"type": "backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "grid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-cross",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "divot",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "checker-board",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "confetti",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "plaid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "solid-diamond",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "zig-zag",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "weave",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-05",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-10",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-20",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-25",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-30",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-40",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-50",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-60",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-70",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-75",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-80",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-90",
"color": "black 0.5",
"thickness": 1,
"size": 10
}
]
},
"normal": {
"labels": {
"enabled": false
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"hovered": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"selected": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"barGroupsPadding": 0.8,
"barsPadding": 0.4,
"xScale": 0,
"yScale": 1,
"series": [
{
"enabled": true,
"seriesType": "line",
"clip": true,
"meta": {},
"name": "Brandy",
"tooltip": {
"anchor": "left-center",
"offsetX": 5,
"offsetY": 5
},
"legendItem": {
"enabled": true,
"iconType": "square"
},
"error": {
"mode": "both",
"xError": null,
"valueError": null,
"xErrorWidth": 10,
"valueErrorWidth": 10
},
"color": null,
"connectMissingPoints": false,
"isVertical": null,
"normal": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"disablePointerEvents": false,
"position": "value",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"type": "circle",
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#333",
"opacity": 0.85
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"a11y": {
"enabled": false,
"titleFormat": "Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"
},
"xMode": "ordinal",
"data": [
{
"x": "1986",
"value": 3.6
},
{
"x": "1987",
"value": 7.1
},
{
"x": "1988",
"value": 8.5
},
{
"x": "1989",
"value": 9.2
},
{
"x": "1990",
"value": 10.1
},
{
"x": "1991",
"value": 11.6
},
{
"x": "1992",
"value": 16.4
},
{
"x": "1993",
"value": 18
},
{
"x": "1994",
"value": 13.2
},
{
"x": "1995",
"value": 12
},
{
"x": "1996",
"value": 3.2
},
{
"x": "1997",
"value": 4.1
},
{
"x": "1998",
"value": 6.3
},
{
"x": "1999",
"value": 9.4
},
{
"x": "2000",
"value": 11.5
},
{
"x": "2001",
"value": 13.5
},
{
"x": "2002",
"value": 14.8
},
{
"x": "2003",
"value": 16.6
},
{
"x": "2004",
"value": 18.1
},
{
"x": "2005",
"value": 17
},
{
"x": "2006",
"value": 16.6
},
{
"x": "2007",
"value": 14.1
},
{
"x": "2008",
"value": 15.7
},
{
"x": "2009",
"value": 12
}
],
"xScale": 0,
"yScale": 1
},
{
"enabled": true,
"seriesType": "line",
"clip": true,
"meta": {},
"name": "Whiskey",
"tooltip": {
"anchor": "left-center",
"offsetX": 5,
"offsetY": 5
},
"legendItem": {
"enabled": true,
"iconType": "square"
},
"error": {
"mode": "both",
"xError": null,
"valueError": null,
"xErrorWidth": 10,
"valueErrorWidth": 10
},
"color": null,
"connectMissingPoints": false,
"isVertical": null,
"normal": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"disablePointerEvents": false,
"position": "value",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"type": "circle",
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#333",
"opacity": 0.85
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"a11y": {
"enabled": false,
"titleFormat": "Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"
},
"xMode": "ordinal",
"data": [
{
"x": "1986",
"value": 2.3
},
{
"x": "1987",
"value": 4
},
{
"x": "1988",
"value": 6.2
},
{
"x": "1989",
"value": 11.8
},
{
"x": "1990",
"value": 13
},
{
"x": "1991",
"value": 13.9
},
{
"x": "1992",
"value": 18
},
{
"x": "1993",
"value": 23.3
},
{
"x": "1994",
"value": 24.7
},
{
"x": "1995",
"value": 18
},
{
"x": "1996",
"value": 15.1
},
{
"x": "1997",
"value": 11.3
},
{
"x": "1998",
"value": 14.2
},
{
"x": "1999",
"value": 13.7
},
{
"x": "2000",
"value": 9.9
},
{
"x": "2001",
"value": 12.1
},
{
"x": "2002",
"value": 13.5
},
{
"x": "2003",
"value": 15.1
},
{
"x": "2004",
"value": 17.9
},
{
"x": "2005",
"value": 18.9
},
{
"x": "2006",
"value": 20.3
},
{
"x": "2007",
"value": 20.7
},
{
"x": "2008",
"value": 21.6
},
{
"x": "2009",
"value": 22.5
}
],
"xScale": 0,
"yScale": 1
},
{
"enabled": true,
"seriesType": "line",
"clip": true,
"meta": {},
"name": "Tequila",
"tooltip": {
"anchor": "left-center",
"offsetX": 5,
"offsetY": 5
},
"legendItem": {
"enabled": true,
"iconType": "square"
},
"error": {
"mode": "both",
"xError": null,
"valueError": null,
"xErrorWidth": 10,
"valueErrorWidth": 10
},
"color": null,
"connectMissingPoints": false,
"isVertical": null,
"normal": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": false,
"disablePointerEvents": false,
"position": "value",
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"hovered": {
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"type": "circle",
"size": 4
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"selected": {
"fill": {
"color": "#333",
"opacity": 0.85
},
"negativeFill": {
"color": "#333",
"opacity": 0.85
},
"risingFill": {
"color": "#333",
"opacity": 0.85
},
"fallingFill": {
"color": "#333",
"opacity": 0.85
},
"stroke": {
"color": "#333",
"opacity": 0.85
},
"lowStroke": {
"color": "#333",
"opacity": 0.85
},
"highStroke": {
"color": "#333",
"opacity": 0.85
},
"lowFill": {
"color": "#333",
"opacity": 0.85
},
"highFill": {
"color": "#333",
"opacity": 0.85
},
"negativeStroke": {
"color": "#333",
"opacity": 0.85
},
"risingStroke": {
"color": "#333",
"opacity": 0.85
},
"fallingStroke": {
"color": "#333",
"opacity": 0.85
},
"hatchFill": "none",
"risingHatchFill": "none",
"fallingHatchFill": "none",
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
},
"markers": {
"enabled": true,
"size": 6
},
"outlierMarkers": {
"enabled": null,
"anchor": "center",
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"size": 6
}
},
"a11y": {
"enabled": false,
"titleFormat": "Series named {%SeriesName} with {%SeriesPointsCount} points. Min value is {%SeriesYMin}, max value is {%SeriesYMax}"
},
"xMode": "ordinal",
"data": [
{
"x": "1986",
"value": 2.8
},
{
"x": "1987",
"value": 4.1
},
{
"x": "1988",
"value": 5.1
},
{
"x": "1989",
"value": 6.5
},
{
"x": "1990",
"value": 12.5
},
{
"x": "1991",
"value": 18
},
{
"x": "1992",
"value": 21
},
{
"x": "1993",
"value": 20.3
},
{
"x": "1994",
"value": 19.2
},
{
"x": "1995",
"value": 14.4
},
{
"x": "1996",
"value": 9.2
},
{
"x": "1997",
"value": 5.9
},
{
"x": "1998",
"value": 5.2
},
{
"x": "1999",
"value": 4.7
},
{
"x": "2000",
"value": 4.2
},
{
"x": "2001",
"value": 1.2
},
{
"x": "2002",
"value": 5.4
},
{
"x": "2003",
"value": 6.3
},
{
"x": "2004",
"value": 8.9
},
{
"x": "2005",
"value": 10.1
},
{
"x": "2006",
"value": 11.5
},
{
"x": "2007",
"value": 12.2
},
{
"x": "2008",
"value": 10
},
{
"x": "2009",
"value": 8.9
}
],
"xScale": 0,
"yScale": 1
}
],
"isVertical": false,
"xAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": "#CECECE",
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "bottom",
"value": null,
"title": {
"zIndex": 35,
"enabled": false,
"maxLength": null,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "X-Axis",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 5,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true,
"padding": {
"left": 5,
"top": 5,
"bottom": 5,
"right": 5
}
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": "#CECECE",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#EAEAEA",
"length": 4,
"position": "outside"
},
"scale": 0
}
],
"yAxes": [
{
"enabled": true,
"width": null,
"drawFirstLabel": true,
"drawLastLabel": true,
"overlapMode": "no-overlap",
"stroke": "#CECECE",
"staggerMode": false,
"staggerMaxLines": 2,
"staggerLines": null,
"orientation": "left",
"value": null,
"title": {
"zIndex": 35,
"enabled": true,
"maxLength": null,
"fontSize": 13,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Number of Bottles Sold (thousands)",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 5,
"right": 0
},
"background": {
"enabled": false
}
},
"labels": {
"zIndex": 35,
"enabled": true
},
"minorLabels": {
"zIndex": 35,
"enabled": false
},
"ticks": {
"zIndex": 35,
"enabled": true,
"stroke": "#CECECE",
"length": 6,
"position": "outside"
},
"minorTicks": {
"zIndex": 35,
"enabled": false,
"stroke": "#EAEAEA",
"length": 4,
"position": "outside"
},
"scale": 1
}
],
"crosshair": {
"zIndex": 41,
"enabled": true,
"xStroke": "#969EA5",
"yStroke": "none",
"displayMode": "float",
"xLabels": [
{
"enabled": true,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 0
}
],
"yLabels": [
{
"enabled": false,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 0
}
]
},
"scales": [
{
"type": "ordinal",
"inverted": false,
"ticks": {
"maxCount": 100
},
"mode": "discrete"
},
{
"type": "linear",
"inverted": false,
"maximum": null,
"minimum": null,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"minCount": 4,
"maxCount": 6
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"count": 5
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
}
],
"crossing": {
"stroke": "none"
},
"quarters": {},
"yCrossAxes": [
0
],
"xCrossAxes": [
0
],
"xScroller": {
"zIndex": 35,
"enabled": false,
"height": 16,
"minHeight": null,
"maxHeight": null,
"orientation": "bottom",
"inverted": false,
"autoHide": false,
"fill": "#f7f7f7",
"selectedFill": "#ddd",
"outlineStroke": "none",
"allowRangeChange": true,
"thumbs": {
"normal": {
"fill": "#E9E9E9",
"stroke": "#7c868e"
},
"hovered": {
"fill": "#ffffff",
"stroke": "#757575"
},
"enabled": true,
"autoHide": false
},
"position": "after-axes"
},
"yScroller": {
"zIndex": 35,
"enabled": false,
"height": 16,
"minHeight": null,
"maxHeight": null,
"orientation": "left",
"inverted": false,
"autoHide": false,
"fill": "#f7f7f7",
"selectedFill": "#ddd",
"outlineStroke": "none",
"allowRangeChange": true,
"thumbs": {
"normal": {
"fill": "#E9E9E9",
"stroke": "#7c868e"
},
"hovered": {
"fill": "#ffffff",
"stroke": "#757575"
},
"enabled": true,
"autoHide": false
},
"position": "after-axes"
},
"xZoom": {
"startRatio": 0,
"endRatio": 1,
"continuous": true
},
"yZoom": {
"startRatio": 0,
"endRatio": 1,
"continuous": true
}
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create data set on our data
var dataSet = anychart.data.set(getData());
// map data for the first series, take x from the zero column and value from the first column of data set
var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });
// map data for the second series, take x from the zero column and value from the second column of data set
var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
// map data for the third series, take x from the zero column and value from the third column of data set
var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });
// create line chart
var chart = anychart.line();
// turn on chart animation
chart.animation(true);
// set chart padding
chart.padding([10, 20, 5, 20]);
// turn on the crosshair
chart.crosshair().enabled(true).yLabel(false).yStroke(null);
// set tooltip mode to point
chart.tooltip().positionMode('point');
// set chart title text settings
chart.title(
'Trend of Sales of the Most Popular Products of ACME Corp.'
);
// set yAxis title
chart.yAxis().title('Number of Bottles Sold (thousands)');
chart.xAxis().labels().padding(5);
// create first series with mapped data
var firstSeries = chart.line(firstSeriesData);
firstSeries.name('Brandy');
firstSeries.hovered().markers().enabled(true).type('circle').size(4);
firstSeries
.tooltip()
.position('right')
.anchor('left-center')
.offsetX(5)
.offsetY(5);
// create second series with mapped data
var secondSeries = chart.line(secondSeriesData);
secondSeries.name('Whiskey');
secondSeries.hovered().markers().enabled(true).type('circle').size(4);
secondSeries
.tooltip()
.position('right')
.anchor('left-center')
.offsetX(5)
.offsetY(5);
// create third series with mapped data
var thirdSeries = chart.line(thirdSeriesData);
thirdSeries.name('Tequila');
thirdSeries.hovered().markers().enabled(true).type('circle').size(4);
thirdSeries
.tooltip()
.position('right')
.anchor('left-center')
.offsetX(5)
.offsetY(5);
// turn the legend on
chart.legend().enabled(true).fontSize(13).padding([0, 0, 10, 0]);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
function getData() {
return [
['1986', 3.6, 2.3, 2.8, 11.5],
['1987', 7.1, 4.0, 4.1, 14.1],
['1988', 8.5, 6.2, 5.1, 17.5],
['1989', 9.2, 11.8, 6.5, 18.9],
['1990', 10.1, 13.0, 12.5, 20.8],
['1991', 11.6, 13.9, 18.0, 22.9],
['1992', 16.4, 18.0, 21.0, 25.2],
['1993', 18.0, 23.3, 20.3, 27.0],
['1994', 13.2, 24.7, 19.2, 26.5],
['1995', 12.0, 18.0, 14.4, 25.3],
['1996', 3.2, 15.1, 9.2, 23.4],
['1997', 4.1, 11.3, 5.9, 19.5],
['1998', 6.3, 14.2, 5.2, 17.8],
['1999', 9.4, 13.7, 4.7, 16.2],
['2000', 11.5, 9.9, 4.2, 15.4],
['2001', 13.5, 12.1, 1.2, 14.0],
['2002', 14.8, 13.5, 5.4, 12.5],
['2003', 16.6, 15.1, 6.3, 10.8],
['2004', 18.1, 17.9, 8.9, 8.9],
['2005', 17.0, 18.9, 10.1, 8.0],
['2006', 16.6, 20.3, 11.5, 6.2],
['2007', 14.1, 20.7, 12.2, 5.1],
['2008', 15.7, 21.6, 10, 3.7],
['2009', 12.0, 22.5, 8.9, 1.5]
];
}
</script>
</body>
</html>
Line Charts are simple charts, which suits the best to represent the data of table type (columns and rows, having two coordinates) on a worksheet. Line Charts are often used to show trends or continuous changes in the data over a period of time. The X axis is horizontal and holds the categories while the Y axis is vertical and holds the values.
This is a basic multi-series line chart, showing the average number of brandy, tequila and whiskey sales by the ACME Corp. from 1986 till 2009. The legend is enabled so the user can manage the chart view by clicking and hovering the legend items. Clicking or hovering legend items turns on/off or hovers the corresponding series. The values (in thousands) and years are distributed along the Y axis and X axis accordingly. There is a vertical crosshair turned on; when you hover any point, the nearest point (year) values are marked, the crosshair shows up and the tooltip shows the year in the title and all values for this year with the product name in the body. Each series has its own color, which makes reading the chart easier.