CopyPastor

Detecting plagiarism made easy.

Score: 1; Reported for: Exact paragraph match Open both answers

Possible Plagiarism

Reposted on 2020-10-27
by xorspark

Original Post

Original - Posted on 2019-12-17
by xorspark



            
Present in both answers; Present only in the new answer; Present only in the old answer;

There is no way to specify a minimum width/height (depending on axis rotation) as the column size is directly related its data; setting a minimum height would misrepresent the values in your chart.
A better solution is to hide the labels that don't fit by setting `hideOversized` to true on the label bullets and use tooltips instead with a chart cursor.




<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data chart.data = [{ "year": "2016", "europe": 1.5, "namerica": 1.5, "asia": 1.1, "lamerica": 0.3, "meast": 0.2, "africa": 0 }, { "year": "2017", "europe": 0, "namerica": 1.7, "asia": 1.2, "lamerica": 0.3, "meast": 0.3, "africa": 0.1 }, { "year": "2018", "europe": 1.8, "namerica": 1.9, "asia": 0, "lamerica": 0.3, "meast": 0.3, "africa": 0.1 }];
chart.legend = new am4charts.Legend(); chart.legend.position = "right";
// Create axes var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "year"; categoryAxis.renderer.grid.template.opacity = 0;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); valueAxis.min = 0; valueAxis.renderer.grid.template.opacity = 0; valueAxis.renderer.ticks.template.strokeOpacity = 0.5; valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43"); valueAxis.renderer.ticks.template.length = 10; valueAxis.renderer.line.strokeOpacity = 0.5; valueAxis.renderer.baseGrid.disabled = true; valueAxis.renderer.minGridDistance = 40;
// Create series function createSeries(field, name) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = field; series.dataFields.categoryY = "year"; series.stacked = true; series.name = name; series.tooltipText = "{name}: {valueX}"; var labelBullet = series.bullets.push(new am4charts.LabelBullet()); labelBullet.label.hideOversized = true; labelBullet.locationX = 0.5; labelBullet.label.text = "{valueX}"; labelBullet.label.fill = am4core.color("#fff"); }
createSeries("europe", "Europe"); createSeries("namerica", "North America"); createSeries("asia", "Asia"); createSeries("lamerica", "Latin America"); createSeries("meast", "Middle East"); createSeries("africa", "Africa");
chart.legend.position = 'bottom'; chart.cursor = new am4charts.XYCursor();
<!-- language: lang-css -->
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
#chartdiv { width: 100%; height: 500px; }
<!-- language: lang-html -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div>
<!-- end snippet -->

You can get two out of the three with the stacked value axis approach you're using.
Column series will always reserve space for other columns, regardless of whether there is a value present or not, so you can't force the top chart's column to fully expand. A workaround for this is to create a second, invisible category axis (disabling labels and grids) and assign the bottom series' `xAxis` to the second category axis:
let categoryAxis2 = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis2.renderer.grid.template.location = 0; categoryAxis2.dataFields.category = "name"; categoryAxis2.renderer.ticks.template.disabled = true; categoryAxis2.renderer.minGridDistance = 1; categoryAxis2.renderer.labels.template.disabled = true; // ... series.xAxis = categoryAxis2; //repeat for both bottom chart's series // ...
This will make the top chart's column expand to the full width as the other columns are associated with a different axis entirely.
To reverse the bottom chart to stop from the top, set `inversed` to true in the value axis' renderer object:
``` valueAxis2.renderer.inversed = true; ```
The category axis cannot be placed in the middle, however.
Demo below:


<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let chart = am4core.create("chartdiv", am4charts.XYChart); chart.leftAxesContainer.layout = "vertical"; chart.numberFormatter.numberFormat = '# €';
chart.data = [ {name: "2011\nLorient", transport: 56, stay: 200, costByNight: 29, costByKm: 14}, {name: "2015\nPoitiers\nLa Rochelle", transport: 96, stay: 54, costByNight: 9, costByKm: 23}, {name: "2016\nRoyaume-Uni", transport: 160, stay: 332, costByNight: 47, costByKm: 62}, {name: "2016\nBiarritz", transport: 185, stay: 516, costByNight: 74, costByKm: 27}, {name: "2017\nRoyaume-Uni", transport: 258, stay: 355, costByNight: 36, costByKm: 24}, {name: "2018\nSingapour\nVietnam\nTaïwan", transport: 1020, stay: 622, costByNight: 41, costByKm: 8}, {name: "2018\nVietnam", transport: 753, stay: 294, costByNight: 49, costByKm: 8}, {name: "2019\nCanada", transport: 1074, stay: 342, costByNight: 38, costByKm: 13}, {name: "2019\nLorient\nGroix", transport: 77, stay: 190, costByNight: 27, costByKm: 20} ];
chart.padding(20, 5, 2, 5);
// Cities/countries names let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.renderer.grid.template.location = 0; categoryAxis.dataFields.category = "name"; categoryAxis.renderer.ticks.template.disabled = false; categoryAxis.renderer.minGridDistance = 1; categoryAxis.renderer.labels.template.wrap = true; categoryAxis.renderer.labels.template.maxWidth = 100; categoryAxis.renderer.labels.template.fontSize = ".75em"; categoryAxis.renderer.labels.template.textAlign = "middle";
/* FIRST CHART */
// First Y axis let valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.tooltip.disabled = true; valueAxis.zIndex = 1; valueAxis.renderer.baseGrid.disabled = true; valueAxis.renderer.fontSize = "0.8em";
// Transport let series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Transport"; series.dataFields.valueY = "transport"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis; // Configure columns series.columns.template.width = am4core.percent(100); series.columns.template.tooltipText = "[font-size:13px]Transport : {valueY}"; series.columns.template.fillOpacity = .8;
// Logement series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Logement"; series.dataFields.valueY = "stay"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis; // Make it stacked series.stacked = true; // Configure columns series.columns.template.width = am4core.percent(100); series.columns.template.tooltipText = "[font-size:13px]Logement : {valueY}"; series.columns.template.fillOpacity = .8;
/* SECOND CHART */
let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis2.marginTop = 50; valueAxis2.renderer.inversed = true; valueAxis2.tooltip.disabled = true; valueAxis2.renderer.baseGrid.disabled = true; valueAxis2.zIndex = 3; valueAxis2.renderer.fontSize = "0.8em";
let categoryAxis2 = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis2.renderer.grid.template.location = 0; categoryAxis2.dataFields.category = "name"; categoryAxis2.renderer.ticks.template.disabled = true; categoryAxis2.renderer.minGridDistance = 1; categoryAxis2.renderer.labels.template.disabled = true;

series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Prix par 200km"; series.dataFields.valueY = "costByKm"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis2; series.stacked = true; // Configure columns series.columns.template.width = am4core.percent(40); series.columns.template.tooltipText = "[font-size:13px]Prix pour 200km : {valueY}"; series.columns.template.fillOpacity = .8; series.xAxis = categoryAxis2;
series = chart.series.push(new am4charts.ColumnSeries()); series.name = "Prix par nuitée"; series.dataFields.valueY = "costByNight"; series.dataFields.categoryX = "name"; series.yAxis = valueAxis2; series.xAxis = categoryAxis2; // Configure columns series.columns.template.width = am4core.percent(40); series.columns.template.tooltipText = "[font-size:13px]Prix par nuit : {valueY}"; series.columns.template.fillOpacity = .8;
<!-- language: lang-css -->
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
#chartdiv { width: 100%; height: 350px; }
<!-- language: lang-html -->
<script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <script src="//www.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div>
<!-- end snippet -->


        
Present in both answers; Present only in the new answer; Present only in the old answer;