[4.0.0-beta.59] PieChart, XYChart not showing

[sonnh58]

My project using VueJS 2

    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import * as am4maps from "@amcharts/amcharts4/maps";
    import am4geodata_worldHigh from "@amcharts/amcharts4-geodata/worldHigh";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";
    import am4themes_dark from "@amcharts/amcharts4/themes/dark";
    am4core.useTheme(am4themes_animated);
    am4core.useTheme(am4themes_dark);

XYChart with CategoryAxis is working with version [4.0.0-beta.55]

But when update to [4.0.0-beta.59] it becomes blank, export button still shows up PieChart same issue above. I tried to install from 4.0.0-beta.56 to 4.0.0-beta.59 and only 4.0.0-beta.57 worked.

[4.0.0-beta.59] XYChart with DateAxis chart.cursor = new am4charts.XYCursor(); not working. Cursor does not show up.

I cant provice link reproduce because my project is too large :(

[martynasma]

Can you provide at least your chart code so that we can set up a test case?

[sonnh58]

Here @martynasma XYChart function:

createChartTLD(data, location) {
                let chart = am4core.create(location, am4charts.XYChart);
                chart.data = data

                let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                categoryAxis.dataFields.category = "name";
                categoryAxis.renderer.grid.template.location = 0;
                categoryAxis.renderer.grid.template.strokeWidth = 0
                categoryAxis.renderer.minGridDistance = 20;
                let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                valueAxis.cursorTooltipEnabled = false;

                let series = chart.series.push(new am4charts.ColumnSeries());
                series.dataFields.valueY = "value";
                series.dataFields.categoryX = "name";
                series.columns.template.tooltipText = "{categoryX}: {valueY}";
                series.columns.template.fill = "#0476E9"

                chart.chartContainer.wheelable = false;
                chart.chartContainer.maxZoomLevel = 1;
                chart.hiddenState.properties.opacity = 0;
                // Add cursor
                chart.cursor = new am4charts.XYCursor();
                chart.cursor.lineY.disabled = true;

                chart.exporting.menu = new am4core.ExportMenu();
                chart.exporting.menu.align = "right";
                chart.exporting.menu.verticalAlign = "top";
                chart.exporting.menu.items = [{
                    "label": "...",
                    "menu": [
                        { "type": "png", "label": "PNG" },
                        { "type": "jpg", "label": "JPG" },
                        { "type": "svg", "label": "SVG" }
                    ]
                }];
                chart.exporting.filePrefix = `CyStack-${this.fromTime}-${this.toTime}-${title}`

            }

this.data= [{"name":"com","value":16340},{"name":"bd","value":4315},{"name":"org","value":1168},{"name":"id","value":1158}]

this.createChartTLD(this.data, this.$refs.chartTLD)

PieChart function:

createPieChart(data, location) {
                var chart = am4core.create(location, am4charts.PieChart);
                chart.data = data
                var pieSeries = chart.series.push(new am4charts.PieSeries());
                pieSeries.dataFields.value = "value";
                pieSeries.dataFields.category = "name";
                pieSeries.labels.template.text = "{category} {value.percent.formatNumber('#.00')}%";

                // Add a legend
                chart.legend = new am4charts.Legend();
                chart.legend.position = "right";
                chart.legend.labels.template.fill = "#C6DBEF";
                chart.legend.valueLabels.template.fill = "#C6DBEF";
                chart.legend.valueLabels.template.text = "{value.percent.formatNumber('#.00')}%";
                chart.legend.labels.template.wrap = true
                chart.legend.labels.template.maxWidth = 150

                pieSeries.labels.template.disabled = true;
                pieSeries.ticks.template.disabled = true;

                chart.exporting.menu = new am4core.ExportMenu();
                chart.exporting.menu.align = "left";
                chart.exporting.menu.verticalAlign = "top";
                chart.exporting.menu.items = [{
                    "label": "...",
                    "menu": [
                        { "type": "png", "label": "PNG" },
                        { "type": "jpg", "label": "JPG" },
                        { "type": "svg", "label": "SVG" }
                    ]
                }];

                var colorSet = new am4core.ColorSet();
                colorSet.list = ["#0476E9", "#34A2FF", "#6177E4", "#E3F2FF", "#D291BC", "#FFCDCD", "#005792", "#FC6B3F", "#F52C4A", "#73DBC4"].map(function(color) {
                    return new am4core.color(color);
                });
                pieSeries.colors = colorSet;
            }
this.data =[{"name":"WordPress","value":7539,"icon":"WordPress.svg"},{"name":"Drupal","value":4393,"icon":"Drupal.svg"},{"name":"Joomla","value":996,"icon":"Joomla.svg"},{"name":"DNN","value":43,"icon":"DNN.png"},{"name":"1C-Bitrix","value":28,"icon":"1C-Bitrix.png"},{"name":"Weebly","value":23,"icon":"Weebly.png"},{"name":"Sitefinity","value":16,"icon":"Sitefinity.svg"},{"name":"Wix","value":13,"icon":"Wix.png"},{"name":"Adobe Experience Manager","value":11,"icon":"Adobe Experience Manager.svg"}]

this.createPieChart(this.data, this.$refs.divCMS)

my package.json

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@amcharts/amcharts4": "^4.0.0-beta.55",
    "@amcharts/amcharts4-geodata": "^4.0.13",
    "@tweenjs/tween.js": "^17.2.0",
    "axios": "^0.18.0",
    "element-ui": "^2.4.8",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "numeral": "^2.0.6",
    "vue": "^2.5.17",
    "vue-clipboards": "^1.2.4",
    "vue-i18n": "^8.1.0",
    "vue-router": "^3.0.1",
    "vue-script2": "^2.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.4",
    "@vue/cli-service": "^3.0.4",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

[martynasma]

Thanks. I'm pretty sure something's up with your app.

Here's your charts working fine:

https://codesandbox.io/s/n069jmxw4?codemirror=1&module=%2Fsrc%2Fcomponents%2FHelloWorld.vue

Are you running the latest version? (beta.60)

[sonnh58]

@martynasma i found that something went wrong with v-show and charts Here my reproduce cursor not working after change v-show from hide to show https://codesandbox.io/s/x78yvw004w

When i remove all v-show, all my charts work normally. Tested in beta.59 beta.60

v-show is working fine with beta.55

[martynasma]

OK, that narrows it down. Thanks.

We have changed mechanism that detects resize (and change in visibility) of the chart. Obviously that does not trigger in this case.

We'll need to dig deeper.

Keep you posted.

[martynasma]

Now that, I'm trying it, the v-show is set on the first chart, and it does show up for me at the first render.

Which browser are you testing in? It might be a browser-related issue.

[sonnh58]

@martynasma I'm using lastest Chrome Version 70.0.3538.67 (Official Build) (64-bit)

[martynasma]

OK, and this chart does appear for you?

[sonnh58]

@martynasma no, https://codesandbox.io/s/x78yvw004w only shows cursor not working.

i can't reproduce my chart not showing. but when i remove all v-show on my project, my chart works normally

[martynasma]

OK, sorry fact that cursor did not work slipped through the cracks somehow.

Yes, indeed.

We're going to be looking into it.

[sonnh58]

@martynasma Hi, i reproduce blank chart when call function make chart twice and v-show. see ref="chartdiv2" https://codesandbox.io/s/x78yvw004w

[martynasma]

Revisiting this issue. Looks like cursor works fine with latest 4.0.7.

Going to close this. But please feel free to reopen if it's still not working for you.