When opening VanCharts chart maker, the last edit template used will be opened by default. If you use the chart maker for the first time, a new chart template will be established.
Clickbutton in the quick access toolbar or click File > New to create a new chart template
After JS charts type has been selected, select Chart Attribute - Datain the rightChart Attribute to configure data for charts as shown below:
It means to allocate different categories of data for the chart. Refer to Data Allocation for details.
It refers to screen data in the source based on certain criteria and only qualified data will be used in the chart. See Data Filteringfor details.
Charts style design refers to a series of settings for chart appearance, including size of chart area and chart title style.
Chart area setting is to set the size of displaying area of chart. After opening the chart maker, we can see a textbox in the bottom to input length and width (unit: pixel). Input figure directly and click enter to modify the size:
We can click Chart Attribute - Style > Title in the chart toolbar to set title style as shown below:
We can set Whether to Show Title in the above figure. If visible, then title can be set.
User can set the font, style, size, and color of title text, such as "Song, bold, 12" as shown below:
User can add frame for the title and set the frame style, including line type, color and border-radius. For example, effect of red hair line title frame with border-radius is shown below:
User can set the background of title. For example, effect of yellow title background with a transparency of 50% is shown below:
Genre and color. Each column in column chart and each line in line chart represents a series, and we can click Chart Attribute - Style > Series in the toolbar to set series type as shown below:
Different types of charts have different series attributes and we take column chart as example in this section. Column and bar charts share same series attributes as detailed in this section; Line, area and scatter charts have the same series attributes; Pie, bubble, radar, stock, range, and combined charts, as well as dashboard have series attributes different to each other. Gantt chart has not series attributes.
User can select color for series in the drop-down list or custom color. Effect of default series color is shown as below:
A total of 10 built-in color schemes are available for users to choose from.
User can select custom colors by "accurate setting" and "gradient color". Select Custom > Accurate Setting as shown below:
Note: A total of 32 colors are available for accurate setting. Each color is selected by user. After clicking the small color box in the interface, "Select Color" dialog box will pop out for user to select desired color. Color displayed in the chart comes from the 32 colors laterally. If the number of series exceed 32, then colors will be used in cycle. Palette for accurate setting is modified from the default palette.
Select Custom > Gradient Color as shown below:
Note: In case of only 2 series, then starting color and ending color is shown respectively for the 2 series. In case of 3 series or above, then custom color changes gradually from starting color to ending color.
A total of 5 genres are available, including normal, 3D, highlight, gradient, and transparent.
Category spacing and series spacing can be set for column and bar charts. Default series spacing and category spacing are respectively 0 and 100%. Effect for setting series spacing as -50% and category spacing as 103 is shown below:
Note: Series spacing and category spacing only apply to column and bar charts.
We can click Chart Attribute - Style > Legend in the chart attribute interface to set legend style as shown below:
User can set the font, style, and size for tag text of the legend.
Note: If minimum font has been set for the browser, and the minimum font set for the template is smaller than that of browser, then the latter shall prevail. For example, Chrome browser has a minimum font of 12, while the template has a minimum font of 10, then the font displayed is 12 when using Chrome to view the report. In this case, the font size of browser shall be modified if necessary.
User can set the location of legend with four options: top, bottom, left and right (default).
Tag refers to the content, style and location displayed for chart series when viewing charts in the web. Select chart and click Chart Attribute - Style > Tag. Check the box in front of tag and then other boxes of desired options as show below:
Note: Tag location can be set outside, inside and in the center of the column.
Save the template and click preview to see the effect below in the web:.
User can set interaction attributes in the row 3 of parameter setting. Open Chart Attribute - Advanced and then select Interaction Attributes.Check Proportion of Value below Data Point Hint and set data format as shown below:
User can also set attributes of Condition in VanCharts. Some data to be processed by user or with criteria can be displayed on criteria. See the example below. Click Display Criteria and add criteria attribute for the template. For example, the background color of column with series number of 3 is modified to green as shown below:
Save the template and click preview to see the effect below in the web: