The svg path for annotation charts works, however it adds a comma to my path where there is supposed to be white space.

this is what my path is supposed to be:

M37.5 42.1875C49.1455 42.1875 58.5938 32.7393 58.5938 21.0938C58.5938 9.44824 49.1455 0 37.5 0C25.8545 0 16.4062 9.44824 16.4062 21.0938C16.4062 32.7393 25.8545 42.1875 37.5 42.1875ZM56.25 46.875H48.1787C44.9268 48.3691 41.3086 49.2188 37.5 49.2188C33.6914 49.2188 30.0879 48.3691 26.8213 46.875H18.75C8.39356 46.875 0 55.2686 0 65.625V67.9688C0 71.8506 3.14941 75 7.03125 75H67.9688C71.8506 75 75 71.8506 75 67.9688V65.625C75 55.2686 66.6064 46.875 56.25 46.875Z

This is what fusion charts does to the path after i specify it:

M37.5,42.1875C49.1455,42.1875,58.5938,32.7393,58.5938,21.0938C58.5938,9.44824,49.1455,0,37.5,0C25.8545,0,16.4062,9.44824,16.4062,21.0938C16.4062,32.7393,25.8545,42.1875,37.5,42.1875ZM56.2546.875H48.1787C44.9268,48.3691,41.3086,49.2188,37.5,49.2188C33.6914,49.2188,30.0879,48.3691,26.8213,46.875H18.75C8.39356,46.875,0,55.2686,0,65.625V67.9688C0,71.8506,3.14941,75,7.03125,75H67.9688C71.8506,75,75,71.8506,75,67.9688V65.625C75,55.2686,66.6064,46.875,56.25,46.875Z

Can someone please let me know what the solution is?

it seems that there is some transformation logic under the hood that needs to be fixed.

Any help would be appreciated!

thanks!

I manage an app created using Angular.

• Angular 12.2.3
• agular-fusioncharts 4.0.0
• fusioncharts 3.19.0

When fusioncharts is added to the app as a dependency, we see the error in Google Chrome issues tab:

Content Security Policy of your site blocks the use of 'eval' in JavaScript`. To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

We believe this error is caused by the following code that appears in some fusioncharts javascript files:
new Function("return this")

Please update fusioncharts to be able to comply with CSP.

I assume if this code is open source public it should be ok to remove the watermark. I have downloaded the public distribution and I'm trying to learn it. Does someone know how to remove the "trial" link?

Hey, I'm looking for some pointers on what the cause of this could be.

I'm getting this error randomly on a bubble chart:

TypeError: Cannot read properties of undefined (reading 'dataLabelStyle')

To explain the context, we have a React component that renders a lot of times, multiple types of charts, and sometimes (it seems randomly) the bubble chart gets fails with this error, tho the data and config sent seem fine.

I haven't found anything wrong with the data sent to the chart, nor have I been able to replicate it on a simple code sample to provide. Plus the error message is not clear on where the issue is.

Here is an edited example of the data I see on the chart object at the moment of the exception.

[
    {
        "x": "3.6",
        "y": "0.91",
        "z": "3.6",
        "name": "A",
        "label": "A"
    },
    {
        "x": "4.16",
        "y": "1.02",
        "z": "4.16",
        "name": "M",
        "label": "M"
    },
    {
        "x": "4.58",
        "y": "1.66",
        "z": "4.58",
        "name": "M2",
        "label": "M2"
    },
    {
        "x": "1.11",
        "y": "0.21",
        "z": "1.11",
        "name": "M3",
        "label": "M3"
    },
    {
        "x": "1.71",
        "y": "0.24",
        "z": "1.71",
        "name": "H",
        "label": "H"
    }
]

Any pointers on why this could happen?

PS: We are PRO licensed, and I'm using the npm version 3.18.0

Any idea when this will be implemented?

source 'https://rubygems.org'
gemspec

if ENV['CI']

use HTTPS with token on Travis CI

git_source :github do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://#{ENV.fetch("CI_USER_TOKEN")}@github.com/#{repo_name}.git"
end
end

gem 'lib1', github: "myorg/lib1"
gem 'lib2', github: "myorg/lib2"

The multi-series line chart example is no longer working correctly with JAWS and NVDA screen readers. With JAWS in Chrome I can only arrow through the first line (Facebook) value. When I press down arrow the focus moves to the next series but screen reader announces the chart details again and not the specific data.

NVDA in Firefox works better but there are other issues. I can tab to the chart, press tab to "enter" the chart and the left/right and up/down arrows work correctly. When I tab to the legend I can arrow through and toggle the visibility of each series. However, I can never get back into the chart to review the data points again. Pressing shift-tab with focus on a legend puts focus on the entire chart rather than one of the series. From there pressing tab puts focus back on the legend rather than moving focus back into the chart. This used to work. Have there been updates to Fusion charts or the accessibility plugin that have broken the correct behavior? Chrome and Firefox are both on the latest versions.

Is there a plain English explanation of the FusionCharts license requirements? I thought this was an open source download but if you have to buy a license maybe I should be looking at the tutorials and help that come with a purchase. Is this software actually open source?

These are official examples of Accessibility Extension with FusionCharts:
https://www.fusioncharts.com/extensions-accessibility/multi-series-column
https://www.fusioncharts.com/extensions-accessibility/pie
Open them in Safari browser (version 15.2) of a MacBook (MacOS version 12.1), steps 2 and 3 in the screenshots below do not work properly. But they work fine in other browsers on the same MacBook.

Demo: https://fusioncharts-dst-bug.vercel.app/
Minimal reproducible example: https://github.com/arcataroger/fusioncharts-dst-bug/blob/master/src/App.js

Issue Description

When a timeseries chart shows daily data points with no time zones specified (the graph labeled "Chart of expected results"), everything seems to work right.

However, if the data includes time zones different from the current browser time, the values and dates seem to become misaligned.

This can happen, for example, when:

• The dataset includes time zones different from the browser time (e.g., browser is in PST but dataset includes CST timestamps)
• The dataset includes two or more time zones, one of which is different from browser time (e.g. browser time is in Pacific Daylight Time, but half the data points are in Pacific Standard Time)
• The above are combined

Steps to reproduce

Make a timeseries chart with the following dataset:

Data:

[
    ["2022-03-11T00:00:00-08:00", 53.1814],
    ["2022-03-12T00:00:00-08:00", 50.7],
    ["2022-03-13T00:00:00-08:00", 50.2547],
    ["2022-03-14T00:00:00-07:00", 62.9599],
    ["2022-03-15T00:00:00-07:00", 70.7427],
    ["2022-03-16T00:00:00-07:00", 65.3493]
]

Schema:

let schema = [
    {
        name: "Time",
        type: "date",
        format: "%Y-%m-%dT%H:%M:%S%Z"
    },
    {
        name: "Value",
        type: "number"
    }
]

See example: https://jsfiddle.net/8cw4h320/7/
Version: 3.19.0

Before scrolling the chart, the tooltip will display the correct data when hovering the cross line, however once you scroll down the data displayed is incorrect. Hovering the data point will display the correct data. This doesn't occur with scrollcolumn2d chart type.

Not Scrolled	Scrolled

As shown in the screenshot below, screen reader users cannot hear the full text when navigating to truncated labels after integrating the Accessibility Extension provided by FusionCharts official.

The truncated text is the same for the visual user as well. But, it really isn't providing enough information.
People with normal eyesight can hover the mouse over the omitted text and get the complete text from the tooltip, but visually impaired users cannot get the complete text through the sound announced by screen readers.

When I try to import react-fusioncharts in my React project written in TypeScript, the following error is present:

TypeScript error in (...)/node_modules/fusioncharts/index.d.ts(205,71):
Parameter 'output' implicitly has an 'any' type.  TS7006

This seems like a similar problem like here.

The workaround is to set skipLibCheck to true in tsconfig.json. However, this is not recommended by TypeScript authors here.

Can we expect this to be fixed at some point in the future? Would you accept a PR fixing that?

Getting Run time error and the Chart Box goes White.

RamdaJs 0.25.0 is a dependency of fusioncharts 3.19.0. It has 1 known critical vulnerability:
** DISPUTED ** Prototype poisoning in function mapObjIndexed in Ramda 0.27.0 and earlier allows attackers to compromise integrity or availability of application via supplying a crafted object (that contains an own property "proto") as an argument to the function. NOTE: the vendor disputes this because the observed behavior only means that a user can create objects that the user didn't know would contain custom prototypes.

When navigating this multi series chart with a target identified, https://www.fusioncharts.com/extensions-accessibility/mscombi2d.html, the screen reader never announces the tartget value. I don't think a fixed target should be announced on each individual bar, though. Perhaps as part of the title or part of the series legend?

I've updated to version 3.20.0, and the "angulargauge" and "thermometer" charts are not being resized when calling the "resizeTo" function.
Here is a sample code: https://codepen.io/kelvinoliveira/pen/jOeoJKP

However, others charts, like the "mscolumn2d" chart, are working properly.
Here is a sample code: https://codepen.io/kelvinoliveira/pen/ExdzMLX

On version 3.16.0, all charts that I tested was working properly.

As part of upgrade from 3.10.1 to 3.12.2 found some Legend font issues and provided JS Fiddle as a reference.
legendItemFontSize attribute is overridden if below CSS is defined as application level.

body, text{ font-size: 14px; }

Even if the above CSS is part of application along with 3.10.1. Chart legends are not overridden. But after upgrade to 3.12.2, observed the font issues.

Added both jsFiddle.

jsFiddle (3.12.2 fusionchart): http://jsfiddle.net/PyroDox/80rvceLv/

jsFiddle(3.10.1 fusionchart): http://jsfiddle.net/PyroDox/k0nt8mca/1/

Hi,
I'm trying to evaluate Fusion Charts to be used on our product. One of the requirements is to be able to customize the theme especially the fonts used in the charts. Base on the documentation I can create my own theme and register it using FusionCharts.register('theme', {name:'mytheme', theme: {...}}).

Now I wanted to use the built-themes such as Fusion and Candy to represent Light / Dark mode. I wanted to combine those with my own theme and override only specific attributes such as the fonts by setting multiple themes such as:
theme: 'candy, mytheme'. As per documentation for conflicting properties the right most will be the preference.

I have attached my custom theme here.
mytheme.txt

My issue is with FusionTime. I understand that theming with FusionTime is a bit different with FusionCharts as it injects the style property defined in the theme. So when I combine two themes the style objects are overwritten entirely and not just the properties that conflicted on my custom theme. So styles like background colors fall back to the default theme values NOT the values from candy theme, since I didn't specify the background colors from my custom theme.

The alternate way of doing this is to copy the entire candy theme and paste it on mytheme then just change the specific attributes such as font. It's a bit counter intuitive since combining themes are a feature already. It just that FusionTime doesn't behave with FusionCharts not just on applying the styles / themes but also when combining multiple themes.

Versions Seen:
3.15.1,
3.18.0

This error occurs when a chart is provided with emptyData. If 1 chart has empty data is cause all the other chart renderings to break as well.

Error thrown when provided emptyData.
Uncaught TypeError: Cannot read properties of undefined (reading 'start'). See image below of error with stackTrace.

Image of charts working when provided with data.

To cause error. I configure the first chart with empty data.

Sample chart config with empty Data
{ "chartId": "onPremEntityCount2Hours", "source": { "options": { "yAxis": {}, "xAxis": { "initialInterval": { "from": 1640633195557, "to": 1640636795557 } }, "paletteColors": {} }, "data": [] } },

I have a CSP in place which does not allow unsafe-eval. When trying to use a timeseries chart, the fusioncharts.timeseries.js script violates the CSP by using new Function("return this")(). Could timeseries be updated to avoid using new Function()? Thanks.

Some charts have the word "Chart" in their chartType names, such as "Multi-series 2D Single Y Combination Chart". This causes problems. After integrating the official Accessibility Extension provided by FusionCharts, the word "chart" was announced twice when announcing "This is a {chartType} chart" to the visually impaired people. As shown in the screenshot below:

"@angular/core": "~10.0.0",
"angular-fusioncharts": "3.0.4",
"fusioncharts": "^3.16.0",

Hi,
I have a hard to reproduce problem, however it gets back sporadically: valueLables on the chart sometimes not rendered but after any interaction that requires redraw of the chart (like resizing the window of the responsive container) make the chart render ValueLabels correctly, however after certain refresh, valueLabels might disappear again.

Any ideas?
Thanks!

Is there a configuration to maximize the length of chart? I ask because there's at least 30 pixels of padding on the left and it takes up a lot of space on small devices, when I would like it be 0 and centered.

I can't set different color for the x-axis border line, because the div lines are overlapping the x-axis border line.

Here's the screenshot of my html:

NOTE: I'm using vue-fusioncharts, but I looked at the code and I saw that the vue-fusionchart is just a wrapper around fusioncharts.

Hello,

I did an update to version 3.18.0 and I ended up with a "chart padding" problem which I didn't had before that .
It seems that after troubleshooting I found that Local Timezone really matters on this issue. It is mostly observable between GMT+1 and GMT+2 (for example Skopje, Sofia, Dublin).

The data that I am using looks like this:

The chart after the update looks like this:

You can see my code here:
https://codesandbox.io/s/react-playground-forked-cusyh?file=/ChartViewer.js

In the playground I have added data, which you can see in data.js, the schema in schema.js and the ChartViewer.js, which contains the logic for the chart.

Any help would be appreciated!
Thank you!

Hi.
I have 2 tabs with graphs:

• doughnut2d (Investments tab)
• msarea (Line Graph tab)

Tabs visibility toggles via display: hidden;

When I call update from the Line Graph tab both graphs are updated correctly.

But if I call update from the Investments tab (the Line Graph tab is hidden) msarea chart is incorrect:

Backend responses are equal:

• from Investments tab
  {"Categories":"[{\"label\":\"Jan 18\"},{\"label\":\"Jan 23\"},{\"label\":\"Jan 30\"},{\"label\":\"Feb 06\"},{\"label\":\"Feb 13\"},{\"label\":\"Feb 20\"},{\"label\":\"Feb 27\"},{\"label\":\"Mar 06\"},{\"label\":\"Mar 13\"},{\"label\":\"Mar 20\"},{\"label\":\"Mar 27\"},{\"label\":\"Apr 03\"},{\"label\":\"Apr 10\"},{\"label\":\"Apr 17\"},{\"label\":\"Apr 18\"}]","DataSet":"[{\"seriesname\":\"investments\",\"data\":[{\"value\":\"0\",\"toolText\":\"Jan 18, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 23, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 30, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 06, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 13, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 20, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 27, د.إ0.00\"},{\"value\":\"350\",\"toolText\":\"Mar 06, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 13, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 20, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 27, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 03, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 10, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 17, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 18, د.إ350.00\"}],\"anchorRadius\":0}]","Annotations":null,"YAxisMaxValue":385.0,"YAxisMinValue":0.0,"Caption":"investments","RenderAt":"investments-chart","Action":"investments/investments","Data":{"totalAmount":"د.إ350"},"PrimaryLightColour":"58a9c6","PrimaryDarkColour":"2e545e","BaseFontColour":"555555","CentreLabel":null,"MinusColour":null,"PlusColour":null,"LabelDisplay":"","LabelStep":0,"ShowNavigation":true,"NumVDivLines":5,"FooterNote":null,"ShowFooterNote":false,"IsAllocationPieChart":false,"IsProtectionGraphChart":false,"HasData":true,"LabelStepType":1,"CurrencySymbol":"د.إ","FiltersOptions":null}
• from the Line Graph tab
  {"Categories":"[{\"label\":\"Jan 18\"},{\"label\":\"Jan 23\"},{\"label\":\"Jan 30\"},{\"label\":\"Feb 06\"},{\"label\":\"Feb 13\"},{\"label\":\"Feb 20\"},{\"label\":\"Feb 27\"},{\"label\":\"Mar 06\"},{\"label\":\"Mar 13\"},{\"label\":\"Mar 20\"},{\"label\":\"Mar 27\"},{\"label\":\"Apr 03\"},{\"label\":\"Apr 10\"},{\"label\":\"Apr 17\"},{\"label\":\"Apr 18\"}]","DataSet":"[{\"seriesname\":\"investments\",\"data\":[{\"value\":\"0\",\"toolText\":\"Jan 18, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 23, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Jan 30, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 06, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 13, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 20, د.إ0.00\"},{\"value\":\"0\",\"toolText\":\"Feb 27, د.إ0.00\"},{\"value\":\"350\",\"toolText\":\"Mar 06, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 13, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 20, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Mar 27, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 03, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 10, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 17, د.إ350.00\"},{\"value\":\"350\",\"toolText\":\"Apr 18, د.إ350.00\"}],\"anchorRadius\":0}]","Annotations":null,"YAxisMaxValue":385.0,"YAxisMinValue":0.0,"Caption":"investments","RenderAt":"investments-chart","Action":"investments/investments","Data":{"totalAmount":"د.إ350"},"PrimaryLightColour":"58a9c6","PrimaryDarkColour":"2e545e","BaseFontColour":"555555","CentreLabel":null,"MinusColour":null,"PlusColour":null,"LabelDisplay":"","LabelStep":0,"ShowNavigation":true,"NumVDivLines":5,"FooterNote":null,"ShowFooterNote":false,"IsAllocationPieChart":false,"IsProtectionGraphChart":false,"HasData":true,"LabelStepType":1,"CurrencySymbol":"د.إ","FiltersOptions":null}

So, the incorrect rendering of msarea chart occurs only if a container is hidden. The issue was reproduced for v3.16.0 and v3.18.0

after the groupBy operation
column updatedAt is of type 'interval'
and TimeSeries chart not rendered

example:
` const schema = [
{
name: 'identifier',
type: 'string'
}, {
name: 'state',
type: 'string',
}, {
name: 'updatedAt',
type: 'date',
format: '%Q',
}
]

const groupByDateAndState = DataStore.Operators.groupBy(
[
{
column: 'updatedAt',
timeUnit: Utils.DatetimeUnits.Hour,
outputFormat: '%Y-%m-%d %H',
},
{
column: 'state',
outputAs: 'Status',
},
],
[
{
column: 'state',
operation: 'count',
outputAs: 'Count'
}
]
)

const config = { enableIndex: true, indexBy: 'updatedAt' }
const store = new DataStore()
store.createDataTable([], schema, config)

const table = store.getDataTable().query(groupByDateAndState)

const dataSource = {
chart: { ...},
data: table
}`

Hi, we just updated from Angular 8.0 to Angular 8.2.3, so I bumped angular-fusioncharts and fusioncharts libs with it but I have a loading problem with zonejs.

main.ts:12 Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
    at Function.push../node_modules/zone.js/dist/zone.js.Zone.assertZonePatched (zone.js:58)
    at new NgZone (ng_zone.ts:123)
    at getNgZone (application_ref.ts:358)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory (application_ref.ts:255)
    at application_ref.ts:308
    at fusioncharts.js:13

• "angular-fusioncharts": "3.0.3",
• "fusioncharts": "3.14.0",
• "@angular/animations": "~8.2.3",
• "@angular/cdk": "^8.0.0",
• "@angular/common": "~8.2.3",
• "@angular/compiler": "~8.2.3",
• "@angular/core": "~8.2.3",
• "@angular/forms": "~8.2.3",
• "zone.js": "~0.9.1"

If I downgrade fusioncharts to 3.13.4 the zonejs error problem disappear but I still have an a warning issue about fusionscharts.s module :

WARNING in ./node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'fusioncharts.theme.fusion.js.map': Error: Can't resolve './fusioncharts.theme.fusion.js.map' in 'C:\Users\zzzz\yyy\xxxx\node_modules\fusioncharts\themes'

WARNING in ./node_modules/fusioncharts/fusioncharts.charts.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'http://localhost:3052/3.13.4/map/eval/fusioncharts.charts.js.map': Error: Can't resolve './http://localhost:3052/3.13.4/map/eval/fusioncharts.charts.js.map' in 'C:\Users\zzzz\yyy\xxxx\node_modules\fusioncharts'

WARNING in ./node_modules/fusioncharts/fusioncharts.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'http://localhost:3052/3.13.4/map/eval/fusioncharts.common.js.map': Error: Can't resolve './http://localhost:3052/3.13.4/map/eval/fusioncharts.common.js.map' in 'C:\Users\zzzz\yyy\xxxx\node_modules\fusioncharts'

it's just a npm warning.

When using fusioncharts in version 3.17 together with react, I detected resizing problem in svg. I downgraded to version 3.16 and it worked fine.

3.17 - Resizing bug

3.16 - Resizing OK

Current dependencies:

"dependencies": {

"fusioncharts": "~3.16.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-fusioncharts": "^3.1.2",

"react-scripts": "4.0.3",

},

Code parts:
const chartConfigs = {
type: 'angulargauge',
width: '100%',
height: '210',
dataFormat: 'json',
dataSource: dataSource
}

Note:

• Parent divs contain 100% width
• Chart is wrapped in bootstrap grid

I have tried a few different examples at: https://www.fusioncharts.com/extensions-accessibility/. They are not working with JAWS nor NVDA in chrome browser. I do believe they used to work correctly.
I have specifically tried

• multi-series-column
• mscombidy2d.html
• multi-series-column.html
• single-series-bar.html
  JAWS in Chrome will announce the chart name and axis but it does not announce the values as I arrow through them. I can see the focus moving but there is no announcement. I can tab into the legend and it announces. This used to work???

We are also using the multi-column-bar within a product and it is not announcing there, either. But, we have a column chart that IS working correctly.

Note that the charts work and announce correctly when using NVDA or JAWS in Firefox. It is also working correctly in VoiceOver in Safari.

Rounding has the following deficiencies which are shown in the codepen example.

• Y Axis shows duplicate marker values. The chart should only place horizontal grid lines on a round value.
• Data Markers do not use the round configuration and instead use the default formatting.
• Rounding ignored for values <1

https://codepen.io/alex-dunn-onesoon-ltd/pen/OJjebGY

Each line of the line-breaking legend text is wrapped in the <tspan> tags and set the corresponding coordinates.

The Accessibility Extension provided by FusionCharts assigns the original HTML of the line-breaking legend to aria-label instead of plain text:
aria-label="Toggle the slicing of <tspan x="28">25.33% Venezuela</tspan><tspan dy="18" x="28">Countries With Most Oil</tspan><tspan dy="18" x="28">Reserves In MMbbl = One</tspan><tspan dy="18" x="28">Million barrels</tspan>"
This causes the text announced by screen readers to contain HTML code when focusing on a line-breaking legend.

https://bundlephobia.com/[email protected]

Size of the fusioncharts npm bundle is 1.3MB due to which the whole application bundle has become very big.

Hi,

I want to use it by reactjs, how ?

When FusionCharts is upgraded to version 3.19.0 or 3.18.0, once the scroll bar of the legends is scrolled on mobile devices, the whole page is stuck, and the user can no longer scroll the whole page to see the content at the bottom of the page.
This problem occurs on both Android and IOS devices and can be reproduced when you visit https://x79gzo.csb.app/ on your mobile devices.

Currently if you have more than 1 data element for pie chart everything works good (it shows labels for each pie chart segment) but if there is only 1 element no labels are visible.

http://jsfiddle.net/erik88/2dmotkpb/ - labels exist
http://jsfiddle.net/erik88/2dmotkpb/1/ - labels do not exist

Description :
This is a intermittent issue i am facing sometimes on my system with fusion charts on my system and my graphs doesn't load.

Complete error :
Uncaught TypeError: Cannot read property of undefined (reading 'inCanfontSizeWithUnit')
at t.manageSpace
at t.updateVisual
at e._drawJob

See example at:
https://codesandbox.io/s/angular-gantt-resizable-desjyd?file=/package.json

Step 1: Set "fusioncharts": "3.16.0", in package.json.
-> If you resize the browser preview pane, both charts will correctly resize their width.

Step 2: Set "fusioncharts": "3.19.0", in package.json.
-> If you resize the browser preview pane, the Gantt chart doesn't resize.

"angular-fusioncharts": "3.0.4",
"fusioncharts": "^3.16.0",

When applying CSS Zoom transformation on a chart container, everything works fine except that mouse event positions are calculated badly yielding a shifted highlights of items on the chart. It affects ALL charts, not just the one in the example.
The shift is proportional to the amount of zoom.

Users cannot see the currently focused legend because the scroll bar does not scroll with the focus when focusing on the legend outside the legend display area. When users use the arrow keys to focus on a legend that is outside the legend display area and needs to scroll to see it, the legend scroll bar does not automatically scroll to display the currently focused legend, as shown in the following two screenshots:
The currently focused legend of the following screenshot is on the next page of the legend display area, and users need to scroll down the legend scroll bar manually to see it:

The currently focused legend of the following screenshot is on the previous page of the legend display area, and users need to scroll up the legend scroll bar manually to see it:

The scroll bar of an ordinary web page can automatically scroll with the currently focused element, making the currently focused element visible on the screen all the time.

Expected Behaviour
Tooltip should not be clipped when I see it on edges of the chart.

Actual behaviour
My chart is displayed inside a container have a fixed height and fixed width. Chart always displayed in the defined area. But when I trying to see tooltip from the edges of chart then they appear as clipped from left.

Image

Device and Language
This problem exist in almost all android devices. And I am using Fusion chart in react-native via react-native-fusionchart .

Possible Solution
A way to always set the zIndex greater than all its parent containers and any other, that resolve this issue, otherwise as per my utility there is no point to display tooltip in chart.

Error :-

This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export.
 import * as Charts from 'fusioncharts/fusioncharts.charts';
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.module.ts:15:30 - error TS2307: Cannot find module 'fusioncharts/themes/fusioncharts.theme.fusion'.
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.module.ts:20:61 - error TS2304: Cannot find name 'TimeSeries'.
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme,TimeSeries)

package.json file :-

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.1",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "angular-fusioncharts": "^3.0.4",
    "fusioncharts": "^3.15.1-sr.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

node version:- 10.20.1

please help me to solve this problem thank you 

Hi,
Since I'm not able to use the angular wrapper (see this issue), I'm trying to switch to the plain JavaScript version for installing FusionCharts.
My goal would be to render a pie2d chart.

After importing FusionCharts via its CDN in my index.html

<!-- Step 1 - Include the fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Step 2 - Include the fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

And created the following div

<div id="chart-container"></div>

I'm trying to render the chart with the following code

  private chartConfig = {
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "showPercentInTooltip": "0",
        "decimals": "1",
        "useDataPlotColorForLabels": "1",
        //Theme
        "theme": "fusion"
    }
    }
  }

Then, when the component is initialized, I get from my back-end the data that I need and, after, create the chart

  ngOnInit() {
    this.visService.gatheredData.subscribe(res => {
      this.receivingData = res['data']['vis_data'];
      this.chartConfig['dataSource']['data'] = this.receivingData['graduates']['content'];
      FusionCharts.ready(function(){
        var chartObj = new FusionCharts(this.chartConfig);
        chartObj.render('chart-container');
       });
  })
}

Instead of seeing the chart, though, this is what I get

What am I doing wrong?
I'm following the examples as provided in the documentation but it seems that something is still wrong

The accessibility extension reported the following error on the console:

This occurs when the data length of the later series in a scatter chart is less than the data length of the first series.
I noticed that this problem was fixed in @fusioncharts\accessibility\src\categories\multiSeries.js (as shown on the left in the screenshot below), but not in Accessibility Extension (as shown on the right in the screenshot below):

This also causes the aria-label to be added incorrectly, causing incorrect text to be announced by screen readers.
Such as in the screenshot below, the data length of the first series (red dots) is 3. Although the data length of the second series (black dots) is greater than 3, it is also incorrectly considered that there are only 3 plots, and only the first 3 points have been added aria-label:

Another example is the screenshot below. Although the third series (blue) has only one point, which is less than the 35 points of the first series (red), its aria-lable is also added with "Plot 1 of 35". The sentence in the black background in the screenshot below is the text announced by VoiceOver when the data plot in the red circle gets the focus.

This is an official example of Accessibility Extension with FusionCharts: https://www.fusioncharts.com/extensions-accessibility/multi-series-column
When the first legend "IOS App Store" is disabled, steps 2 and 3 in the following screenshot will not work, and the visually visible data inside this bar chart (green and red bars) will no longer be accessible to visually impaired users:

But when the first legend "IOS App Store" is enabled, users can focus on bars in this bar chart:

I have considered using FusionCharts in one our projects, but after trying it, was dissuaded because of the drastically increased compilation time.

Simply including import FusionCharts from 'fusioncharts'; to a create-react-app project increases the compilation time from ~500ms to 5 seconds plus.

The /vendors/ directory contains JavaScript with ES6(+) features such as arrow functions. The following file is an example:
fusioncharts-dist/vendors/fc-utils/src/time-converter/index.js. If the distribution code was transpiled to ES5, browsers such as IE11 would be supported.

I am using marimekko chart in my project and I am giving widthPercent values for my categories to a decimal percision of 2 points as its a business requirement. Issue i have noticed is that if the numbers don't add upto to exact 100 amount like if its 100.00000001 ( its an issue in javascript that floating point numbers sometimes dont add up correctly like 0.1 + 0.2 is not 0.3 ) then bar widths are auto calculated instead of using the one's that i provided?