amcharts / amcharts4 Goto Github PK

View Code? Open in Web Editor NEW

1.1K 28.0 324.0 2.71 GB

The most advanced amCharts charting library for JavaScript and TypeScript apps.

Home Page: https://www.amcharts.com/

JavaScript 1.73% TypeScript 98.27%

amcharts typescript javascript data-visualization charts maps chart graph svg visualization

amcharts4's People

Contributors

Stargazers

Watchers

Forkers

yuzimine johnadib warheft bockjan imranissufo aguamar peluprvi benjaminzekavica newtornmoses neurosatan arunlodhi jiuzhuaxiong cld0 mbasetty monojkarar eyask zyy422 kurentlfs newrecruiter goloveychuk dmsmaxim xogroup chnoch randriamitsiry bsvensson jbailey4 dasa ofk hacklock okisad quentin-tardivon originalsin netiz21 ashgadala ptorrent deawx darknight009 gahoiv andili99 lexalchemy bnasoft ytang-glu lyuji282 gggoaaat rgrahamesp pks-os develar prostoandrei denis554 dmarchuk thetrunk thomashoryn rishu931997 necheva ryanpetrucci fstackgeek caolongteng nickmaev intelogie skapicic anonymousdevteam freelancermid rebmullin sagarteria raymondseger rahulmeshram jmouavangsou j0rtit ramkewal klayre ysneo getugms bermar23 wwappdev tyler-mcwilliam ciarancourtney skammagithub saidoze rockbell89 jcalan8907 yanfilipovich alexocculate alejoestela lorduakiti novosconceitos ictinus-engenharia dockinkong lailesha 5pix claytonastrom sailmar rojmedisma hiipeng pinghe securecloud-biz jmoulis emadaaltiti amitdumka ramy-ahmed ahmedfe

amcharts4's Issues

Add ability to load external GeoJSON files for the MapChart

Implementation will use DataSource and geodataSource property to load the map.

Code-wise this will look like this.

TypeScript / ES6 / JavaScript:

map.geodataSource.url = "/path/to/myCustomMap.json";

JSON:

{
  // ...
  "geodataSource": {
    "url": "/path/to/myCustomMap.json"
  }
}

HeatLegend without its series set results in critical error

Example: https://codepen.io/team/amcharts/pen/JvvKjw

mouse event overlapped

If the document has the mouse event like "movedown" or something else, After enabling the cursor function, the event can not trigger.

Chart tooltip not always wide enough

It seems that when you have tooltips enabled, that the max-width of the tooltip is limited to the width of the chart. This causes issues when you have a narrow chart, but a long description:

As you can see from the screenshot above, the text runs out of the tooltip layer.

(NOTE: The full text of the tooltip is "Assigned To Others: 37.5% (6)".)

Ideally the tooltip expands wide enough to fit the text. Alternatively, maybe the text wraps to multiple lines.

Add Legend events

Legend class currently does not have any specialized events.

It would be useful to have a set of "hit", "over", "out", "toggle", "hide", "show" events for items.

E.g.:

markerHit
labelOver
itemHit
itemOver
itemToggle
itemShow
itemHide

etc.

TreeMap: drill-up zooms the chart out but does not return to top level on drill-up/zoomout

Initial:

After drill-down:

Returning from drill-down:

This does not happen if Animated theme is used.

Example: https://codepen.io/team/amcharts/pen/LmvMGG

Use less intrusive technique for printing the chart

Currently the chart disables all top-level elements on the page before initiating print of the chart. Then restores after print.

This is kind of intrusive and may create various issues.

We need another technique that's less intrusive.

Irregular Date Intervals Tooltip Behavior

Hi guys,

I'm trying to use the latest am4-charts to setup a date-based line chart containing dates with irregular intervals. Scaling and everything else works like a charm, but it seems that as soon as date intervals are not on a regular base, the tooltip gets only shown when hovering on the exact data point, which is nearly impossible for large datasets. I've setup a small code pen to illustrate the problem:

https://codepen.io/arm1n/pen/gzzmVQ

So my question is: Is this a bug? Or is it intended to not work with this kind of setup? I haven't found any demos using irregular date intervals. If it's by design (or simply not possible), what would you recommend to do? The only workaround, which came to my mind is using an axis range guide showing the actual value. Thanks for any help!

Test issue #2

Test issue #2. Disregard.

Assume count: 1 in DateAxis.baseInterval

Would be best if we would not have to specify count in baseInterval since it's mostly 1 anyway.

Better rendering of Legends

When a legend is rendered for a chart where the text is too long, the values on the chart get cropped off:

I would love to see an option where if the legend line item is too long to fit on one line, the text label would be cropped and the value displayed in full. Something like:

Ideally we could also lay out the legends in columns, where the label and values were each in their own column.

Using `DateAxis.min` displays error message (but works)

When setting DateAxis.min the chart works as expected, but displays error:

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.max = new Date(2018, 3, 30).getTime();
dateAxis.min = new Date(2018, 3, 15).getTime();

The scale is set correctly, though.

DateAxis.max does not have this issue.

Example: https://codepen.io/team/amcharts/pen/bMQXEb

Labels on a ValueAxis with logarithmic scale is messed up

Example: https://codepen.io/team/amcharts/pen/GdpBGK?editors=0010

Axis displays wrong cursor tooltips if `skipEmptyPeriods` is used

(Apr 26 data point does not exist, but it shows up as tooltip while hovering on Apr 30, which does exist)

Example: https://codepen.io/team/amcharts/pen/erjazO

Specify fixed start date & end date for Gantt Charts

In v3, Gantt chart date axis range depends on the defined segments. Some users want to have more flexibility by setting a fixed start date and/or end date (independent from the segments).

Breaks text selection everywhere

<body style="touch-action: none; user-select: none; -webkit-user-drag: none;">

Interaction.prototype.setTemporaryStyle does not add temporary styles, the DOM 0 styles added to the <body> are permanent.
Interaction.prototype.processTouchable adds a prevent default listener on document for the pointerdown event.

Both of them breaks text selection on a application level, this is a major issue.

PieSeries.legendSettings is ignored

Setting legendSettings.labelText (or other parameters) does not have any effect on the Legend.

Example: https://codepen.io/team/amcharts/pen/Vdweaq

JSON: axes properties are not set

None of the axes properties are set via JSON.

Axis tooltip shows wrong date information

This might be related to #27.

When I enable the XYCursor on a line chart with a DataAxis, the xAxis is showing the wrong values on the tooltip. All of the tooltips are off by 30 minutes. Instead of showing 8:00 - 16:00, when mousing over the chart it's showing values from 8:30 - 16:30:

https://codepen.io/anon/pen/KRrqGw

You can see the behavior here:

Hiding or showing the legend doesn't adjust the chart to the available dimensions

hide, show and setVisibility methods don't re-position or resize the chart.

https://codepen.io/team/amcharts/pen/e2b0557b22dd819159a5ff5dc82d255d/

Disabled property not removing from layout when set after chart has rendered

Setting the disabled property does not seem to work as I expect based on the documentation:

Controls if element is disabled.

A disabled element is hidden, and is removed from any processing, layout calculations, and generally treated like if it does not existed.

The element itself is not destroyed, though. Setting this back to false, will "resurrect" the element.

I read this as that setting disabled=true should be like setting the CSS display:none on an HTML element, in that the element should be treated as it does not exist.

If I disable an element when initializing an object, it works as I expect.

However, if I set the disabled property on a chart that has already rendered, the sprite is just "hidden", the rest of the chart does not reflow to account for the item no longer being enabled.

This makes trying to hide/show elements (like a legend) very difficult. I'm trying to adjust certain elements availability based on the current dimensions of a chart, which can change in realtime.

fix brand link type

It's better to use target_blank for brand link, because now links is open on current tab of browser and visitor lost current page!

Pie chart slices may flicker when hovering the "inside" border

Slices may flicker when it's selected and the cursor stays over the border facing the center of the pie.

JSON: Referring to Series in XYChartScrollbar gives error

Looks like a deeper issue with JSON processing of List elements.

do not preventDefault on keydown!

We found that amCharts4 preventDefault on keydown and after use v4 $(document).keydown() is not fire!

HeatLegend does not respect dataField setting in Series.heatRules (always assumes dataField="value")

Example:
https://codepen.io/team/amcharts/pen/6998c8ad885499f51f1411e189557efb/

If I added additional line for value in dataFields, the scale would be OK.

Margins/axis/labels get displaced when chart container visibility is toggled by Bootstrap tabs

Example: https://codepen.io/team/amcharts/pen/4e6d30abbf20e137f42a31c1cb51ea5e/

Chart in visible tab looks good:

When switched to chart that was previously hidden:

When switched back to the first chart that was OK before:

Error on js if chart element disappear on page

We use js pushState for navigate on our service pages and after migrate to v4 have error if chart element is removed from page. We don't have this error with v3. It's weird, because sometimes occur 14, sometimes 143 times!
Error: <path> attribute d: Expected number, "MNaN,0 LNaN,0 LNa…".


t.attr | @ | amcharts4.min.js:20
  | e.draw | @ | amcharts4.min.js:20
  | e.validate | @ | amcharts4.min.js:20
  | t.update | @ | amcharts4.min.js:20
  | (anonymous) | @ | amcharts4.min.js:20
  | requestAnimationFrame (async) |   |  
  | l | @ | amcharts4.min.js:20
  | t.update | @ | amcharts4.min.js:20
  | (anonymous) | @ | amcharts4.min.js:20
  | requestAnimationFrame (async) |   |  
  | l | @ | amcharts4.min.js:20
  | t.update | @ | amcharts4.min.js:20
  | (anonymous) | @ | amcharts4.min.js:20
  | requestAnimationFrame (async) |   |  
  | l | @ | amcharts4.min.js:20
  | t.update | @ | amcharts4.min.js:20
  | (anonymous) | @ | amcharts4.min.js:20
  | requestAnimationFrame (async) |  
...

Also we think render time of chart drawing increased too much!

ES2015 import without .js is broken.

Vanila es2015 require a location of url with extension (.js) in a path.
Today dist/es2015 implementation of amcharts4 doesn't work.

Test issue #2

Test. Disregard.

Ability to render legend with label/values in columns

I'd like to be able to render the legend label/value pairs in a grid like:

If the grid width is too large for the area, the label column width should collapse so that the value always shows and (ideally) the labels get a text-overflow styling of ellipsis to them, something like:

(NOTE: I just hacked the image together, so the ellipsis alignment isn't quite right.)

The way the legend currently gets rendered, the values can often overflow outside the chart area if the labels are long, so they can't be read (such as when rendering a pie chart).

Test #3

This Github issue is synchronized with Zendesk:

Ticket ID: #33335
Priority: N/A
Group: Support
Organization: amCharts
Assignee: Martynas Majeris
Issue escalated by: Martynas Majeris

Original ticket description:

Test ticket #3. Please disregard.

Yours sincerely,

Martynas Majeris
amCharts

tooltip is not working / duplicated when using tooltipHTML

You have to set tooltipText so that the tooltip will work reference

if (tooltip.text != undefined && tooltip.text != "") {
                    //@todo: think of how to solve this better
                    if (tooltip && !tooltip.parent) {
                        tooltip.parent = this.tooltipContainer;
                    }
                    // Reveal tooltip
                    tooltip.show();
                    return true;
}

Every time you move to a new column the tooltip is duplicated example

Improve the efficiency of animations

Amcharts 4 might not work well with zone.js ?

Amcharts takes 50% CPU when not interacting with the page (processors: Intel® Core™ i7-7600U CPU @ 2.80GHz × 4)

Multiple tabs makes chrome freeze.

Tested with angular 6.0.2

Radar chart with startAngle/endAngle does not take up the whole available space

Example: https://codepen.io/team/amcharts/pen/ELQgNW

Test issue

Test issue. Do not mind.

let chart = amcharts4.create("chartdiv", amcharts4.XYChart);

DateAxis.skipEmptyTimeUnits = true does not seem to be working

Demo: https://codepen.io/team/amcharts/pen/MGKEyx?editors=0010

Cursor.behavior = "panY" is inverted

Seems like "panY" setting for Cursor behavior is inverted. Dragging down moves selection up, and vice versa.

Example: https://codepen.io/team/amcharts/pen/NzKqpz?editors=0010

Add a list of pre-defined values to Heat rule

Proposal is to add a list of values to IHeatRule interface.

E.g.:

export interface IHeatRule {
	target: Sprite;
	property: string;
	min: any;
	max: any;
        list: any[]; // <-- new property
	dataField?: string;
	minValue?: number;
	maxValue?: number;
}

If set, any code that is using heat rules, would be able to choose a property closest out of the list array, rather than try to interpolate it from min and max values.

This would allow having fine-tuned heatmaps.

Suggestion: Iterating over a ListTemplate - add an each() method

I have the need to frequently iterate over a ListTemplate (likes series). I noticed a ListTemplate has an iterator() function, but the usage seems overly complex. The examples of using the function look like this:

am4core.iter.each(dateAxis.renderer.labels.iterator(), function (label) {
    label.fillOpacity = label.fillOpacity;
});

Why not just give the ListTemplate an each() method, so that code could be changes to:

dateAxis.renderer.labels.each(function (label){
    label.fillOpacity = label.fillOpacity;
});

That would seem to save a good bit of code.

I could use forEach on the values array, but it seems like using the values property directly is discouraged.

Mapping JS objects to rendered SVG elements for easier theming

One of the problems I find myself struggling with is how to customize an object (either via a theme or API calls). The reason I struggle is I'm often left having to guess at what property/class is generating the SVG element.

Is there any way that the SVG elements that are rendered could be mapped back to their JS class instances in any meaningful way?

It would be great to be able to query the DOM for something like "[data-className='XYCursor'] to find instance of all the cursor elements.

This would be really helpful when creating a theme, because I could inspect the DOM for hints as to what JS class I need to apply styles to.

Heights of vertical HeatLegend's gradient band and value axis (labels) are different

Example: https://codepen.io/team/amcharts/pen/JvvRrR

Tooltip acts funky on a right-side Y axis

This happens when chart width is relatively small, and (presumably) the tooltips do not fit into axis.

Live demo: https://codepen.io/team/amcharts/pen/PRdxvB

(reduce window width to reproduce)

Test issue #4

Test issue. Disregard.

ngOnDestroy dispose call does not remove all listeners

  ngOnDestroy() {
      this.chartContainer.disposeChildren();
      this.chartContainer.dispose();
  }

Produces the following error after having destroyed the component:

core.js:1601 ERROR TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at documentPointToSvg (Utils.js:811)
    at Object.documentPointToSprite (Utils.js:840)
    at XYCursor.Cursor.handleCursorMove (Cursor.js:88)
    at XYCursor.handleCursorMove (XYCursor.js:193)
    at Object.eval [as dispatch] (EventDispatcher.js:357)
    at eval (EventDispatcher.js:248)
    at Object.each [as b] (Array.js:54)
    at InteractionObjectEventDispatcher.EventDispatcher._eachListener (EventDispatcher.js:221)
    at InteractionObjectEventDispatcher.EventDispatcher.dispatchImmediately (EventDispatcher.js:246)
    at Interaction.handleTrack (Interaction.js:1204)

am4charts.XYCursor dispose method does not unregister the events

"Class [...] is not loaded" error following simple JSON setup

Following the simple JSON based Pie Chart from here: https://www.amcharts.com/docs/v4/getting-started/basics/.

This message shows at the place where the chart should be:

Class [function e(){var e=t.call(this)||this;return e.className="PieChart",e.innerRadius=0,e.radius=Object(a.c)(80),e.align="none",e.valign="none",e.startAngle=-90,e.endAngle=270,e.applyTheme(),e}] is not loaded.

LineSeries with Bullets : extremly slow rendering

When adding Bullets to LineSeries rendering lasts very long ( vs rendering of just LineSeries on same amount of data). Problem is observed when data consists of more than 400 values (for my machine)
Is this a known issue?

JSON config example (uncommented when rendering with bullets):
'series': [{ 'xAxis':'v1', 'type':'LineSeries', 'name':run_1_name, 'stroke':'#FEB201', #'strokeOpacity':0, 'tooltipText':run_1_name + ':{valueY} at {dateX}', 'dataFields': { 'dateX': 'timestamp_run_1', 'valueY': 'run_1' }, # "bullets": [{ # "type": "CircleBullet", # 'tooltipText':run_1_name + ':{valueY} at {dateX}', # }] }]

TypeError when using minGridDistance on XYChart

Version: AmCharts 4.0.0-beta.24 from NPM

I have an x axis where I want to show steps on every value, so I use:
categoryAxis.renderer.minGridDistance = 1;

Then I get the following error in the Chrome v66 browser console (the chart still shows correctly though):

TypeError: Cannot read property 'axisLength' of undefined
    at CategoryAxis.get [as axisLength] (Axis.ts:1057)
    at CategoryAxis../node_modules/@amcharts/amcharts4/.internal/charts/axes/Axis.js.Axis.validateLayout (Axis.ts:819)
    at System../node_modules/@amcharts/amcharts4/.internal/core/System.js.System.validateLayouts (System.ts:395)
    at System../node_modules/@amcharts/amcharts4/.internal/core/System.js.System.update (System.ts:193)
    at System.ts:356

Example code:

        let chart = am4core.create(chartID, am4charts.XYChart);
        chart.data = [{
            "country": "Lithuania",
            "litres": 501.9,
            "units": 250
        }, {
            "country": "Czech Republic",
            "litres": 301.9,
            "units": 222
        }, {
            "country": "Ireland",
            "litres": 201.1,
            "units": 170
        }, {
            "country": "Germany",
            "litres": 165.8,
            "units": 122
        }, {
            "country": "Australia",
            "litres": 139.9,
            "units": 99
        }, {
            "country": "Austria",
            "litres": 128.3,
            "units": 85
        }, {
            "country": "UK",
            "litres": 99,
            "units": 93
        }, {
            "country": "Belgium",
            "litres": 60,
            "units": 50
        }, {
            "country": "The Netherlands",
            "litres": 50,
            "units": 42
        }];
        // Create axes
        let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.title.text = "Days";
        let x = new am4charts.CategoryAxis();
        categoryAxis.renderer.minGridDistance = 1;

        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.title.text = dataPointLabels[0];
        let series2 = chart.series.push(new am4charts.LineSeries());
        series2.name = "Number of links";
        series2.stroke = am4core.color("#CDA2AB");
        series2.strokeWidth = 3;
        series2.dataFields.valueY = "units";
        series2.dataFields.categoryX = "country";

chart.dispose() throws error

It worked before at least in beta4

XYCursor's lines obstruct zoom out button

XYCursor lines go above zoom up button. It is sometimes hard to click on it.

It gets worse if lines' strokeWidth is increased.

Example: https://codepen.io/team/amcharts/pen/Lmwrwz?editors=0010

(zoom chart and try to click on a zoom out button)