Akash Biswas

Hi, To have legends in a single-series Column chart, you need to use the Multi-series Column chart type where only one series must be provided in the dataSource. This will have the legend shown for the only one series that is present. Refer to the sample fiddle : http://jsfiddle.net/ged6eoxo/ Thanks, Akash

Hi, Natively, FusionCharts Horizontal Linear Gauge do not support displaying the pointer in the middle. It can be set to "top" or "below" using the boolean attribute "pointerOnTop". However, if you have a static implementation and want to have a pointer placed in the middle of the gauge with out any real-time feature enabled, you can place a Shape Annotation instead of the pointer. Refer to this sample using Shape annotation to place a static pointer in middle : http://jsfiddle.net/Lo7bjk5p/ Please note : -Annotations are static in nature. -No animations will be enabled. -You need to place the "x" and "y" co-ordinate of the annotations accordingly. Reference docs : https://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-shape-annotations.html#polygon Thanks, Akash.

Also find the Attribute list for all the available chart types for reference : http://www.fusioncharts.com/dev/chart-attributes.html?chart=area2d Thanks, Akash.

Hi Mahajan, FusionCharts provides in-depth customize-able properties both at chart-level and individual data-level of the chart dataSource. However, you can set only your required basic attributes like "captionName", "xAxisName", or "yAxisName", etc to render charts. FusionCharts internally will set the default values for all the required chart attributes, which will be overridden only if it is explicitly set by user. Please check the sample with the minimal attribute set for visualization : http://jsfiddle.net/umvgth5b/ Also to have a predefined visualization, you can set the themes provided by FusionCharts for basic configuration. Check this link below for reference : http://www.fusioncharts.com/dev/basic-chart-configurations/centralizing-themes-for-your-charts.html Thanks, Akash.

Hi Scott, We would like to add one more work-around using the Text and Line Annotations feature of FusionCharts. To achieve your requirement, you can add custom annotation lines representing the trend-lines, and the Text annotations to add the labels for the respective lines. Please find the below sample fiddle, if it is meeting your requirement. Fiddle : http://jsfiddle.net/Akash008/9w1ybte7/2/ For further reference check the documentation link for Annotations : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-shape-annotations.html#line Also the supported list of positioning macros and the usage instructions : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/positioning-annotations-using-macros.html Please note : Annotations are static in nature. Thanks, Akash.

Hi, It is currently not possible to set more than one border color for different dataset(or data plots). However, if you intend to differentiate it for different series, then as a suggestion you could use the "dashed" attribute at dataset level to set it for individual datasets. Also, this "dashed" attribute is applicable at data-level. Sample : http://jsfiddle.net/hn2Lhc87/3/ Thanks, Akash.

Hi, As per the image provided in your query, we presume you are using Bar(horrizontal) Chart, and natively the trend-lines in a chart is capable of displaying a single display label for a single trend-line. However, your requirement could be achieved using the Text annotations feature. To position the Text annotation exactly on top and bottom of the trend-line, you could make use of the supported macros or by using absolute values with respect to the chart. Please refer to the documentation for further information on positioning macros for annotations : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/positioning-annotations-using-macros.html Also find a sample fiddle of Bar Chart using annotations to display trend-line labels : http://jsfiddle.net/yy1ump6j/ Please find the fiddle of Linear Gauge : http://jsfiddle.net/1mck81rq/ Thanks, Akash.

Hi Sebastien, We understand that placing the annotations manually is difficult when you have the data values changing periodically, as the annotations are static components of the chart. The application of annotation was suggested as a work-around to have your required visualization, since placing values inside Pie is not supported, natively. Suppose, if you have 4 data plots with values : 500, 400, 10, 10. Sample fiddle : http://jsfiddle.net/Akash008/e21gqbbk/1/ The plots with the values "10" does not have the sufficient space on the plot(slice) to display only the values.(The values may be less than 10 also!). Hence, placing values inside the Pie/Doughnut slices is not a correct visualization. Thanks, Akash.

Hi Sebastien, FusionCharts does not supports displaying the values inside the Pie/Doughnut charts, since the angled slices dimension may not be sufficient to display the values or labels, which may result to a wrong or incorrect visualization of the chart. Natively it is not supported. However as a work-around you can use the values in the text annotations and place it manually on the slices accordingly. Reference to Text Annotations : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-text-annotations.html Reference to positioning annotations : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/positioning-annotations-using-absolute-values.html Reference to "drawComplete" event : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events.html#event-drawComplete Find a sample using Text annotations in "drawComplete" event to display labels and values inside the slices : http://jsfiddle.net/Akash008/e21gqbbk/ Thanks, Akash.

Hi, Natively it is not possible. But you can achieve it by storing the dataSource in a variable and the using the FusionCharts "rendered" events to calculate the percentage dynamically in the event function. Then set the calculated value in the JSON variable and use "setJSONData()" by passing the modified JSON variable. Please check the sample implementing the above technique : http://jsfiddle.net/fpa38rpf/ Reference to "rendered" event : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events.html#event-rendered Reference to "setJSONData()" : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setJSONData Thanks, Akash.

Hi, The Pie chart by default displays the label and the percentage value separated by (,) comma. You can set your custom string to be displayed instead of the default one, by setting the "displayValue" attribute in each of the "data" objects with the custom string. Check the modified fiddle for reference to set your required format : "labelName (percentageValue%)" : http://jsfiddle.net/g97kgn3L/ Please note : For any change in the values you need to modify the "displayValue" attribute accordingly with your custom text. Thanks, Akash.

Hi Cristian, The shadow for the line chart can be set using the attribute "showShadow" and set it to "1". However the shadow configuration settings which was available in Flash versions has been deprecated now. Sample Without shadow : http://jsfiddle.net/n16ms1ts/Sample With shadow : http://jsfiddle.net/n16ms1ts/1/ Thanks, Akash.

Hi Cristian, FusionCharts Multi-level Pie Chart represents hierarchical data, the inner and the outer slices are related to each other. You requirement is not possible to achieve your requirement. As a work-around, you can render multiple doughnut charts each on an individual div. Along with additional CSS property to place all the divs on top of each other. Also the containerBackgroundOpacity must be set to "0" at constructor level to set it to transparent. This will bring the final output similar to the provided image. Please note : Legend interaction will not be possible in the above implementation. Sample fiddle : http://jsfiddle.net/sz7o4qca/ Hope this helps. Thanks, Akash.

Hi, Yes, you could configure the bgImage using the below set of attributes accordingly. bgImageHAlign, bgImageVAlign : used to align the image vertically and horizontally, respectively. bgImageScale : used to increase or decrease the scale of the image. bgImageDisplayMode : used to specify the mode in which the background image is to be displayed. Refer to the documentation link : http://www.fusioncharts.com/dev/basic-chart-configurations/border-and-background.html#customizing-the-background-image Thanks, Akash.

Hi, Attribute "canvasBgAlpha" reference link : http://www.fusioncharts.com/dev/basic-chart-configurations/canvas.html#changing-the-canvas-fill-color Attribute "plotFillAlpha" reference link : http://www.fusioncharts.com/dev/basic-chart-configurations/data-plot.html#customizing-data-plot-transparency Hope this helps. Thanks, Akash.

Hi, Are you looking for any sort of implementation as in the below fiddle : http://jsfiddle.net/Akash008/bgv553mj/34/ This has the alpha set, to make it transparent so that the image in the background is visible, and the labels are visible in the foreground. Thanks, Akash.

Hi Surya, FusionCharts Box and Whisker chart does not support horizontal box plots instead of vertical. As of now it is implemented for only vertical box plots. For further reference check the documentation link : http://www.fusioncharts.com/dev/chart-guide/box-and-whisker-chart/introduction.html Thanks, Akash.

Hi Andreia, The possible gradient configuration in Horizontal Linear Gauge could be done using the attributes "gaugeFillMix" and "gaugeFillRatio". That specifies the gradient fill formula for the linear gauge scale. Example: {light-10},{light-20},{light-60} And the fill ratio specifies the ratio of each color separated by comma. Example : "30,70" Please check this sample fiddle : http://jsfiddle.net/Akash008/3fweng4a/ For further reference check the documentation link : http://www.fusioncharts.com/dev/gauge-and-widgets-guide/linear-gauge/configuring-gauge-cosmetics.html#configuring-the-gauge-gradient-mix Hope this helps. Thanks, Akash

Hi, In Multi-series Bar Chart or in any chart type that supports Trend-line feature will have it across the entire chart. It is not possible to restrict the trend-line to any dataset. Step Line Charts are multi-series in nature. But it cannot be combined with any other charts like Bar chart. For further reference on Step Line chart check the documentation link : http://www.fusioncharts.com/dev/chart-guide/step-line-chart/introduction.html Alternatively, you can check the Line Annotations instead of Trend-line, that can be placed anywhere on the chart as you require. Please refer to the documentation : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-shape-annotations.html#line Please note : Annotations are static in nature. Thanks, Akash.

Hi Dave, In the provided fiddle, the width of the chart is set in percentage(100%). Hence, FusionCharts charts will dynamically resize the width, if the container div element width is changed. This will also dynamically show/hide the x-axis labels(chart elements) based on the available space in the current window/div size, irrespective of the attributes labelDisplay='rotate' labelStep='1' being set at chart-level. Please find the same chart with fixed width(in pixels) large enough to accommodate the huge number of labels : https://jsfiddle.net/Akash008/36Lwzqd8/ Also note, you have several category objects set to "showLabel" as "0", which will not show up on chart resize, so the discontinuous labels are displayed. However, as a suggestion, you could remove all the "showLabel" entries in the category-level, and set the "labelSteps"(Example - 20 or 30) accordingly to get the labels uniformly displayed on resize as well. Please find the sample fiddle : https://jsfiddle.net/Akash008/36Lwzqd8/1/ Hope this helps. Thanks, Akash.

Hi James, 1. For the quoted text in your previous reply, the rectangle annotation need to be configured manually to set its x, y, toX and toY attributes for positioning. It cannot be dynamically resized at run-time as stated earlier. 2. However, your suggested technique, Math.min(200, 300) JS function can be used to set absolute values in "x" or "y" attributes only. But it cannot accept the Macros as its parameters. "Math.min( $chartStartX+5, $dataset.0.set.0.x-15 )" wont work. Since macros are strings, and are calculated internally if provided to x, y attributes. 3. Your query for getting the "x", "y" values using events is possible. Please check the sample fiddle : https://jsfiddle.net/Akash008/no1mvauc/ (Check the console) Note : This will fetch the value assigned to the "x" or "y" attribute. If Macros are used, it returns the Macro string itself, not the absolute value. As FusionCharts annotations are static in nature, dynamic resizing based on number of dataplots available is not possible. Thanks, Akash.

Hi James, FusionCharts feature of Annotations are itself static in nature, though it can be positioned dynamically using macros. But, if the annotation is going out of the chart canvas, it need to be manually configured accordingly. For the instance in this fiddle, the group of annotations that is chopped off. The Text annotation can be split into two lines using {br} tag so that its length gets reduced, the Rectangle annotation need to be adjusted accordingly, to keep it within the chart canvas. Please check the modified fiddle : http://jsfiddle.net/Akash008/9s8tvgqc/ Hope this helps. Thanks, Akash.

Hi James, FusionCharts Text annotation item-level attribute "align" defines the horizontal alignment of the text to left, center (default), or right. This alignment is with respect to the position where it is placed. In the provided fiddle, the Text annotation is placed on above another Rectangle(Shape) annotation. The text is positioned to the center of the column plot using the macro "$dataset.0.set.1.x". So, "align": "left" will align the text's leftmost character with respect to the position set using macros. and not with respect to the rectangle annotation. Similarly, the text's rightmost character is aligned with respect to the position, when using "align": "right". Please refer to the modified fiddle(only having Text annotation aligned) : http://jsfiddle.net/Akash008/mvufjvy2/ Hope this helps. Feel free to ask if you still have any query regarding annotation alignment. Thanks, Akash.

Hi James, FusionCharts provides the option to show the custom Annotations on the chart both in foreground as well as in background. You need to set the group-level attribute "showBelow" to "0" to display the annotation on top always. Check the modified fiddle : http://jsfiddle.net/Akash008/3jd9kq6q/ Please find the link below for further reference to configure annotations : http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/grouping-annotations.html#creating-annotation-groups Thanks, Akash.

Hi, To set the semi-transparent colors for the column plots in Candlestick chart you need to set the data-level attribute "alpha" for individual data objects. Please check this sample for reference : http://jsfiddle.net/Akash008/Lr0ebb33/6/ Hope this helps.