Generic placeholder image

chartType

The series type for chart.
String
"Bar"/"Pie"/"Line"/"Meter"/"Gantt"/"Map"/"Area"/"Radar"/"GisMap"/"Donut"/"Bubble"/"Custom"/"Scatter"/"Range"/"Stock"/"Bar3D"/"Area3D"/"Pie3D"/"Donut3D"
Try it: bar,line,area.

data

Add data to a chart. It depends on the type of chart.
column/line/area/radar/donut/range/custom chart
category:Array
An array of numerical values or strings.For column/line/area/radar/donut/range/custom. Example:
category: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep"
          ]
series:[seriesIndex,seriesName,value]
Series data for column/line/area/radar/donut/range/custom. Example:
"series": [
                             {
                             "seriesName": "2013",
                             "value": [
                              2301,
                              2400,
                              3100,
                              2500,
                              1500,
                              1600,
                              2500,
                              3102,
                              3204,
                              4000,
                              2300,
                              1100
                             ],
                             "seriesIndex": 0
                              },
                             {
                             "seriesName": "2014",
                             "value": [
                              2401,
                              2300,
                              3200,
                              2700,
                              1700,
                              1500,
                              2800,
                              3200,
                              3400,
                              4200,
                              2500,
                              1500
                              ],
                            "seriesIndex": 1
                              }
            ]
Try it: Series column, donut.
stockcharts
category:Array
An array of date. Example:
category: [
                              "Jan",
                              "Feb",
                              "Mar",
                              "Apr",
                              "May",
                              "Jun",
                              "Jul",
                              "Aug",
                              "Sep"
          ]
value:Array
An array with the length of 4, which respectively represents [volumn, opening price, closing price, the minimum value, the maximum value] . Example:
"value":[
				  [1,2,3,4,5],[2,3,4,5,6]
	    ]
bubble/scatter/map/gantt
series:{seriesName,value,seriesIndex}
For bubble,value is an array with the length of 3,which represents[x,y,value].  Example:
data:{
      "seriesName": "a",
      "value": [[
        12,
        31,
        14
               ]],
      "seriesIndex": 0
     }
Try it: bubble, map,gantt
pie/gauge
[name,value]
An array with name & vanlue.  Example:
data: [
    [
      "Chrome",
      45.71
    ],
    [
      "IE",
      21.07
    ],
    [
      "Firefox",
      17.85
    ],
    [
      "Safari",
      10.32
    ]
       ]
Try it: pie, gauge.

datasheet

Datasheet is the data displayed in chart below.
visilbe: boolean
Enable or disable datasheet.
font
color: string
Defaults to "black".For example : 
"color": "rgb(153,204,0)",

size: number
Defaults to 12.

fontName: string
Defaults to "SimSun".

style: string
"bold"/"italic"/"bold italic"
valueFormat
.
Try it: datasheet.

interaction

interaction
animation: true
Enable or disable chart's animation.Default to true.
Try it: animation.
draggable: false
Series drag is to merge and delete chart series in the web. When viewing chart in the web, user can manually operate the chart with ease. For example, drag to merge 2 series or delete a series. Only applies to column, bar, line, pie, doughnut, area and bubble charts.
zoom: false
Enable or disable chart zoom. If enable zoom, user can zoom chart by zoom widget. For column/bar/line/area chart.
autoRefresh: 0
Customize the refresh interval for chart. Default to 0.

label

label
font: {}
color: string
Defaults to "black".For example : 
"color": "rgb(153,204,0)",

size: number
Defaults to 12.

fontName: string
Defaults to "SimSun".

style: string
"bold"/"italic"/"bold italic"
labelContent: string
Which content to display. Include
${VALUE},{PERCENT},${CATEGORY},${SERIES}.Example:
				   	"labelContent": "${PERCENT}"
leadLine: boolean
Leadline for pie.
Try it: leadline.
percentFormat: string
Format for percent.
position: string
Position of label content.Can be set "outside", "inside", "center" (colume or bar) or "outside","inside" (pie and so on)
valueFormat: string
Format for value.

legend

legend
background:
Background of legend area.
alpha: number


bordor: {
         bordorStyle: string

         isRoundBorder : boolean 

         borderColor : string

         }


brush: {
	    backgroundType: string
	    "ColorBackground" or "GradientBackground"
        
        color: string
        For ColorBackground

        direction: number
        0 means from left to right  and  1 means from top to bottom. For GradientBackground.

        beginColor: string
        endColor: string

        begin: number 
        end: number

        cyclic: boolean
       }         				   
font:
color: string
Defaults to "black".For example : 
"color": "rgb(153,204,0)",

size: number
Defaults to 12.

fontName: string
Defaults to "SimSun".

style: string
"bold"/"italic"/"bold italic"
position: string
Default to "right". Can be set "top","bottom","left","right"or"right-top"
visible: boolean
Enable or disable legend.
Try it: legend.

plot

plot
background:{}
alpha: number


bordor: {
         bordorStyle: string

         isRoundBorder : boolean 

         borderColor : string

         }


brush: {
	    backgroundType: string
	    "ColorBackground" or "GradientBackground"
        
        color: string
        For ColorBackground

        direction: number
        0 means from left to right  and  1 means from top to bottom. For GradientBackground.

        beginColor: string
        endColor: string

        begin: number 
        end: number

        cyclic: boolean
       }         				   
color: {}
Include three options. 

colorStyle: fill/gradient

colorList: Depends on colorStyle.An array of rgb.Example:
          "colorList": [
                       "rgb(255,255,255)",
                       "rgb(0,0,0)"
                       ]

definedColors: Vancharts provides ten kinds of color scheme.  "bright"/"elegant"/"soft"/"simple"/"old"/"business"/"pure"/"classic"/"gradual"/"nostalgia"
Try it: colorlist
conditionConfig:
conditionConfig.
horizontalIntervalBackground: {}
verticalIntervalBackgroundColor: {}
theme: string
Chart's style. Apply for colume,bar,area and pie. "highlight"/"gradient"/"transparent"/"3D"
Try it: theme
xAxis: {}
axisType : string 
"CategoryAxis"/"ValueAxis"/"DateAxis"

axisReversed : boolean
Default to false.

baseLog : number
Baselog for valueaxis.

font : {}

format : string

gap : number
Label gap.Default to 0. 

isArrowShow : boolean
Default to false.

isLabelWrap : boolean
Default to false.

lineColor : string

lineStyle : number

mainTickUnit : number
For valueaxis.

secondTickUnit : number
For valueaxis.

maxValue : number
Forced to set max value for valueaxis.

minValue: number
Forced to set min value for valueaxis.

rotation: number
From -90 to 90.

title: {}
title

unit: string
"Unit_Hundred"/"Unit_Thousand"/"Unit_Ten_Thousand"/"Unit_Hundred_Thousand"/"Unit_Million"/"Unit_Ten_Million"/"Unit_Hundred_Million"/"Unit_Billion" 

yAxis: {}
secondAxis: {}

series

series
categoryGap: number
Gap between categories. From 0 to 500.
compareRule: number
For bubble chart. 1 means compare by bubble's length. 2 means compare by bubble's area.
innerRadius: number
Inner radius for donut.From 10 to 90.
isCurve: boolean
For line or are chart.
isFilled: boolean
Whether filled with color.For radar chart.
isHorizontal: boolean
For column. If it is "true", return bar chart.
isNullValueBreak: boolean
If value is null,line break or continue.For line or area chart.
lineStyle: 0
The size of line.For line,area or radar. From 0 to 3.
markerType: string
Marker type for line,area,scatter or radar.Include
"RoundMarker"/"RoundFilledMarker"/"SquareFilledMarker"/"TriangleFilledMarker"/"DiamondFilledMarker"/"DiamondMarker"/"SquareMarker"/"TriangleMarker"/"NullMarker".
maxBubblePixel : 0
Bubble's max size.Default to 30.
seriesGap: 0
Gap between series. From -100 to 100.
showNegativeBubble: boolean
Whether show negative bubble.Default to true.
smallPercent : 0
Value Less than smallPercent will be Displayed in minor plot. Default to 0.
subType : string
The chart type of minor plot. "pie" or "bar"

title

title
text:string
Text of title.
font:{}
align: string
Position of title. Include "left"/"right"/"center".
background: {}

tooltip

tooltip
labelContent:
Set which to display.Include ${VALUE},{PERCENT},${CATEGORY},${SERIES}.
percentFormat:
Format.
style:string
"white" or "black".
valueFormat: string
Format.