BenBiz

Ayan, Thank you, that worked. We are now fully paid members of Fusion Charts!

Any progress on this item?

I am attempting to follow the instructions listed here and upgrade to a paid version: https://www.fusioncharts.com/dev/upgrading/license-activation However, in code the definition for the FusionCharts.options object is this: FusionCharts.FusionChartStatic.options: { creditLabel?: string | boolean; defaultTheme?: string; export?: { useCanvas?: string | boolean; }; preventTrackResize?: boolean; resizeTrackingInterval?: number; scriptBaseUri?: string; SVGDefinitionURL?: string; } Error: Property 'license' does not exist on type '{ creditLabel?: string | boolean; defaultTheme?: string; export?: { useCanvas?: string | boolean; }; preventTrackResize?: boolean; resizeTrackingInterval?: number; scriptBaseUri?: string; SVGDefinitionURL?: string; }'.ts(2339) There is no license function available to populate with the key. I am using V3.16.0 via npm. Am I doing something wrong here? Thank you.

Srishti, "yAxisMaxValue", looks like it solved the problem. Thank you.

Srishti, It looks like the solution was to add "formatNumberScale": "1" This forces the number to display with a smaller number of digits and therefore takes care of the sizing issue caused by long number strings. Thank you.

Thank you for the reply. I believe I was able to figure out the issue. When the values exceed 1 million, the chart changes sizes. This jsFiddle demonstrates the problem: https://jsfiddle.net/BenBiz/mvoubf7e/35/ Is this expected or is there a solution?

Thank you for the reply. This fiddle demonstrates the issue. There are 3 horizontal bar charts in the example. Each chart has a different width. I realize the data is different for each chart, however they are all in separate containers and I would expect that each chart would render according to its own container (full width). They seem to be dependent on each other still even though they are rendered separately, and are separate chart objects. The rectangle does not fill the full svg dom element width. https://jsfiddle.net/q6xr9kca/

Thank you. Changing some of the chart properties did help a little, but I still get some different sizes on smaller screens. When I allow for full screen then everything seems to be ok. So it seems to be that there is a minimum width in order for the heights to properly size. Could this be the case? "chartTopMargin": 0, "chartLeftMargin": 0, "chartRightMargin": 0, "chartBottomMargin": 0 smaller screen: full size screen:

When creating bullet charts, the height is not consistent between multiple charts. The image below shows several charts, all with a height specified, however some charts appear small and ignore the height property. Is there a way to ensure the height is properly set? <ReactFusioncharts type="hbullet" width="100%" height={80} dataFormat="JSON" dataSource={dataSource} />

When creating a horizontal bar chart, the bar width does not fill the container. In my example the svg element (and container) have a 563px width. However, the rectangle (rect) element inside the svg only has a 485px width. The images below show chrome dev tools illustrating the problem. Also, this does not happen in every case. This example has two bar charts on top of each other. The first renders almost the full width but the second, pictured below, does not. The only difference in the code between the two is the values in the dataSource, yet they render different widths. How can I guarantee that the chart width will be consistent and fill the container? <ReactFusioncharts type={'stackedbar2d'} width="100%" height={80} dataFormat="JSON" dataSource={dataSource} />

Ayan, That worked perfectly. Thank you.

I have 2 bar graphs, one standard column, and one horizontal stacked. Each of these graphs have a border at the start and end of the data. (i.e. on top and bottom for column graph, and on left and right for stacked). I have used many options for disabling these borders but none have succeeded. I have traced this down to an element with the following class name: "axisReferenceVisualsBottom". Are there any options to remove the lines created by axisReferenceVisualsBottom? Stacked (left and right borders): Column (top and bottom): Configuration: chart: { animation: 0, bgColor: '#ffffff', canvasBgColor: '#ffffff', showAlternateHGridColor: 0, showAlternateVGridColor: 0, maxLabelWidthPercent: '20', showPlotBorder: 0, usePlotGradientColor: 0, showBorder: 0, showCanvasBorder: 0, showTooltipforWrappedLabels: 1, showValues: 0, useEllipsesWhenOverflow: 1, showLegend: 0, showZeroPlane: 0, showVZeroPlane: 0, showLabels: 0, showDivLineValues: 0, showLimits: 0, showSecondaryLimits: 0, lineAlpha: 0, canvasLineAlpha: 0, borderAlpha: 0, canvasBorderAlpha: 0, xAxisLineColor: '#ffffff', yAxisLineColor: '#ffffff', yAxisValueBgColor: '#ffffff', yAxisValueBgAlpha: 0, xAxisValueBgColor: '#ffffff', xAxisValueBgAlpha: 0, showYAxisValues: 0, showXAxisValues: 0, showXAxisLine: 0, showYAxisLine: 0, showAnchors: 0, numDivLines: 0, showDivLineSecondaryValue: 0, }