Skip to content

F
fordecyt_2019
Commit f451e38f authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Update bar chart values and tooltip

parent bfb44c73
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 90 deletions
public/js/centropais_periurbano_charts.js
View file @ f451e38f
...@@ -17,7 +17,9 @@ const makeStackedBarSeries = (chart, name, category, value, color, units="Ha") = ...@@ -17,7 +17,9 @@ const makeStackedBarSeries = (chart, name, category, value, color, units="Ha") =
series.units = units; series.units = units;
series.dataFields.categoryX = category; series.dataFields.categoryX = category;
series.dataFields.valueY = value; series.dataFields.valueY = value;
series.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} {units}"; // format tooltip depending on units
units == "Ha" ? series.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} {units}" :
series.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###')} {units}";
series.dataItems.template.locations.categoryX = 0.5; series.dataItems.template.locations.categoryX = 0.5;
series.stacked = true; series.stacked = true;
series.tooltip.pointerOrientation = "vertical"; series.tooltip.pointerOrientation = "vertical";
...@@ -35,7 +37,7 @@ const makeLineSeries = (chart, name, value, percent, category, yAxis, color) => ...@@ -35,7 +37,7 @@ const makeLineSeries = (chart, name, value, percent, category, yAxis, color) =>
series.stacked = true; series.stacked = true;
series.calculatePercent = true; series.calculatePercent = true;
} }
// FIXME: using totalPercent chanhges values when turning series on or off // FIXME: using totalPercent changes values when turning series on or off
series.yAxis = yAxis; series.yAxis = yAxis;
series.stroke = am4core.color(color); series.stroke = am4core.color(color);
series.strokeWidth = 3; series.strokeWidth = 3;
...@@ -44,14 +46,14 @@ const makeLineSeries = (chart, name, value, percent, category, yAxis, color) => ...@@ -44,14 +46,14 @@ const makeLineSeries = (chart, name, value, percent, category, yAxis, color) =>
let bullet = series.bullets.push(new am4charts.Bullet()); let bullet = series.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color(color); // tooltips grab fill from parent by default bullet.fill = am4core.color(color); // tooltips grab fill from parent by default
if(percent) { if (percent) {
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"; bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
} else{ } else {
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.formatNumber('#.00')} millares de Ha[/] [#fff][/]"; bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.formatNumber('#.00')} millares de Ha[/] [#fff][/]";
} }
//bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"; //bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
// FIXME: using totalPercent chanhges values when turning series on or off` // FIXME: using totalPercent changes values when turning series on or off`
let circle = bullet.createChild(am4core.Circle); let circle = bullet.createChild(am4core.Circle);
circle.radius = 4; circle.radius = 4;
...@@ -80,7 +82,7 @@ am4core.ready(function() { ...@@ -80,7 +82,7 @@ am4core.ready(function() {
d3.json(query).then(d => chart.data = d); d3.json(query).then(d => chart.data = d);
*/ */
let stackedBarTitle = stackedBarChart.titles.create(); let stackedBarTitle = stackedBarChart.titles.create();
stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (millares de pixeles)"; stackedBarTitle.text = "Grado de urbanización en la RU-CMCP (pixeles)";
stackedBarTitle.fontSize = 15; stackedBarTitle.fontSize = 15;
stackedBarTitle.marginBottom = 10; stackedBarTitle.marginBottom = 10;
stackedBarTitle.fill = am4core.color(mainTextColor); stackedBarTitle.fill = am4core.color(mainTextColor);
...@@ -88,39 +90,39 @@ am4core.ready(function() { ...@@ -88,39 +90,39 @@ am4core.ready(function() {
stackedBarChart.data = [ stackedBarChart.data = [
{ {
category: "2015", category: "2015",
value1: 954, bajo: 958343,
value2: 145, medio: 145076,
value3: 76 alto: 76317
}, },
{ {
category: "2016", category: "2016",
value1: 1084, bajo: 1090132,
value2: 167, medio: 167451,
value3: 94 alto: 94094
}, },
{ {
category: "2017", category: "2017",
value1: 1195, bajo: 1202563,
value2: 191, medio: 191489,
value3: 115 alto: 114686
}, },
{ {
category: "2018", category: "2018",
value1: 1304, bajo: 1309015,
value2: 216, medio: 214078,
value3: 140 alto: 135958
}, },
{ {
category: "2019", category: "2019",
value1: 1373, bajo: 1382721,
value2: 230, medio: 230523,
value3: 156 alto: 156668
}, },
{ {
category: "2020", category: "2020",
value1: 1418, bajo: 1433701,
value2: 242, medio: 245636,
value3: 170 alto: 174002
} }
]; ];
stackedBarChart.legend = new am4charts.Legend(); stackedBarChart.legend = new am4charts.Legend();
...@@ -142,9 +144,9 @@ am4core.ready(function() { ...@@ -142,9 +144,9 @@ am4core.ready(function() {
stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor); stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarValueAxis.renderer.labels.template.fontSize = 15; stackedBarValueAxis.renderer.labels.template.fontSize = 15;
makeStackedBarSeries(stackedBarChart, "Bajo", "category", "value1", "#61ac65", "Millares de pixeles"); makeStackedBarSeries(stackedBarChart, "Bajo", "category", "bajo", "#61ac65", "pixeles");
makeStackedBarSeries(stackedBarChart, "Medio", "category", "value2", "#fcfccc", "Millares de pixeles"); makeStackedBarSeries(stackedBarChart, "Medio", "category", "medio", "#fcfccc", "pixeles");
makeStackedBarSeries(stackedBarChart, "Alto", "category", "value3", "#b33d6e", "Millares de pixeles"); makeStackedBarSeries(stackedBarChart, "Alto", "category", "alto", "#b33d6e", "pixeles");
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++ //++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY // FALTA CONSTRUIR QUERY
...@@ -166,39 +168,39 @@ am4core.ready(function() { ...@@ -166,39 +168,39 @@ am4core.ready(function() {
stackedBarLineChart.data = [ stackedBarLineChart.data = [
{ {
category: "2015", category: "2015",
value1: 21750.100923, bajo: 21750.100923,
value2: 3124.799027, medio: 3124.799027,
value3: 1575.434647 alto: 1575.434647
}, },
{ {
category: "2016", category: "2016",
value1: 24659.53423, bajo: 24659.53423,
value2: 3621.838793, medio: 3621.838793,
value3: 1939.124265 alto: 1939.124265
}, },
{ {
category: "2017", category: "2017",
value1: 27560.13116, bajo: 27560.13116,
value2: 4177.560407, medio: 4177.560407,
value3: 2393.056475 alto: 2393.056475
}, },
{ {
category: "2018", category: "2018",
value1: 30374.679993, bajo: 30374.679993,
value2: 4719.515675, medio: 4719.515675,
value3: 2854.437993 alto: 2854.437993
}, },
{ {
category: "2019", category: "2019",
value1: 32656.93783, bajo: 32656.93783,
value2: 5188.035213, medio: 5188.035213,
value3: 3357.159708 alto: 3357.159708
}, },
{ {
category: "2020", category: "2020",
value1: 34305.410194, bajo: 34305.410194,
value2: 5602.741586, medio: 5602.741586,
value3: 3789.051441 alto: 3789.051441
} }
]; ];
...@@ -235,13 +237,13 @@ am4core.ready(function() { ...@@ -235,13 +237,13 @@ am4core.ready(function() {
stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor); stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLinePercentAxis.renderer.labels.template.fontSize = 15; stackedBarLinePercentAxis.renderer.labels.template.fontSize = 15;
makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "value1", "#f8caa0"); makeStackedBarSeries(stackedBarLineChart, "Bajo", "category", "bajo", "#f8caa0");
makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "value2", "#cf8a4f"); makeStackedBarSeries(stackedBarLineChart, "Medio", "category", "medio", "#cf8a4f");
makeStackedBarSeries(stackedBarLineChart, "Alto", "category", "value3", "#93592a"); makeStackedBarSeries(stackedBarLineChart, "Alto", "category", "alto", "#93592a");
makeLineSeries(stackedBarLineChart, "% Bajo", "value1", true, "category", stackedBarLinePercentAxis, "#D197FA"); makeLineSeries(stackedBarLineChart, "% Bajo", "bajo", true, "category", stackedBarLinePercentAxis, "#D197FA");
makeLineSeries(stackedBarLineChart, "% Medio", "value2", true, "category", stackedBarLinePercentAxis, "#844DDF"); makeLineSeries(stackedBarLineChart, "% Medio", "medio", true, "category", stackedBarLinePercentAxis, "#844DDF");
makeLineSeries(stackedBarLineChart, "% Alto", "value3", true, "category", stackedBarLinePercentAxis, "#351591"); makeLineSeries(stackedBarLineChart, "% Alto", "alto", true, "category", stackedBarLinePercentAxis, "#351591");
// Use this to avoid turning on or off legend items. // Use this to avoid turning on or off legend items.
// Remove if use of percentTotal is fixed in series // Remove if use of percentTotal is fixed in series
...@@ -369,13 +371,14 @@ am4core.ready(function() { ...@@ -369,13 +371,14 @@ am4core.ready(function() {
barPercentChartTitle.fill = am4core.color(mainTextColor); barPercentChartTitle.fill = am4core.color(mainTextColor);
let table = "periurbanoBajio"; let table = "periurbanoBajio";
// query substr of region labels so they do not include "Tramo"
let query = `${baseUrl}/query/${table}?columns=substring(region,7) as region,total20/1000 as has,(total20-total15)*100/total15 as inc&filter=id>6&id<13&sort=inc desc`; let query = `${baseUrl}/query/${table}?columns=substring(region,7) as region,total20/1000 as has,(total20-total15)*100/total15 as inc&filter=id>6&id<13&sort=inc desc`;
d3.json(query).then(d => barPercentChart.data = d); d3.json(query).then(d => barPercentChart.data = d);
/* Create axes */ /* Create axes */
let barPercentCategoryAxis = barPercentChart.xAxes.push(new am4charts.CategoryAxis()); let barPercentCategoryAxis = barPercentChart.xAxes.push(new am4charts.CategoryAxis());
barPercentCategoryAxis.dataFields.category = "region"; barPercentCategoryAxis.dataFields.category = "region";
// FIXME: axis labels are too big // set wrap labels and set max length
let label = barPercentCategoryAxis.renderer.labels.template; let label = barPercentCategoryAxis.renderer.labels.template;
label.wrap = true; label.wrap = true;
label.maxWidth = 80; label.maxWidth = 80;
...@@ -448,30 +451,30 @@ am4core.ready(function() { ...@@ -448,30 +451,30 @@ am4core.ready(function() {
// Themes begin // Themes begin
am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_animated);
// Themes end // Themes end
var chart = am4core.create("topLeftChart", am4charts.XYChart); var chart = am4core.create("topLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.maskBullets = false; chart.maskBullets = false;
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis()); var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var yAxis = chart.yAxes.push(new am4charts.CategoryAxis()); var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = "x"; xAxis.dataFields.category = "x";
yAxis.dataFields.category = "y"; yAxis.dataFields.category = "y";
xAxis.renderer.grid.template.disabled = true; xAxis.renderer.grid.template.disabled = true;
xAxis.renderer.minGridDistance = 40; xAxis.renderer.minGridDistance = 40;
xAxis.renderer.labels.template.fill = am4core.color(mainTextColor); xAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
xAxis.renderer.labels.template.fontSize = 10; xAxis.renderer.labels.template.fontSize = 10;
yAxis.renderer.grid.template.disabled = true; yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.inversed = true; yAxis.renderer.inversed = true;
yAxis.renderer.minGridDistance = 30; yAxis.renderer.minGridDistance = 30;
yAxis.renderer.labels.template.fill = am4core.color(mainTextColor); yAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
yAxis.renderer.labels.template.fontSize = 10; yAxis.renderer.labels.template.fontSize = 10;
var series = chart.series.push(new am4charts.ColumnSeries()); var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "x"; series.dataFields.categoryX = "x";
series.dataFields.categoryY = "y"; series.dataFields.categoryY = "y";
...@@ -480,7 +483,7 @@ am4core.ready(function() { ...@@ -480,7 +483,7 @@ am4core.ready(function() {
series.defaultState.transitionDuration = 3000; series.defaultState.transitionDuration = 3000;
series.fill = am4core.color("#000"); series.fill = am4core.color("#000");
series.fillOpacity =0; series.fillOpacity =0;
// Set up column appearance // Set up column appearance
var column = series.columns.template; var column = series.columns.template;
column.strokeWidth = 2; column.strokeWidth = 2;
...@@ -492,7 +495,7 @@ am4core.ready(function() { ...@@ -492,7 +495,7 @@ am4core.ready(function() {
column.height = am4core.percent(100); column.height = am4core.percent(100);
column.column.cornerRadius(6, 6, 6, 6); column.column.cornerRadius(6, 6, 6, 6);
column.propertyFields.fill = am4core.color("#000000")//"color"; column.propertyFields.fill = am4core.color("#000000")//"color";
// Set up bullet appearance // Set up bullet appearance
var bullet1 = series.bullets.push(new am4charts.CircleBullet()); var bullet1 = series.bullets.push(new am4charts.CircleBullet());
bullet1.tooltipText = "{region}: {value.workingValue.formatNumber('#.')} Ha"; bullet1.tooltipText = "{region}: {value.workingValue.formatNumber('#.')} Ha";
...@@ -513,8 +516,8 @@ am4core.ready(function() { ...@@ -513,8 +516,8 @@ am4core.ready(function() {
bullet2.zIndex = 1; bullet2.zIndex = 1;
bullet2.fontSize = 9; bullet2.fontSize = 9;
bullet2.interactionsEnabled = false;*/ bullet2.interactionsEnabled = false;*/
/* /*
// define colors // define colors
var colors = { var colors = {
//"critical": "#ca0101", //"critical": "#ca0101",
...@@ -523,7 +526,7 @@ am4core.ready(function() { ...@@ -523,7 +526,7 @@ am4core.ready(function() {
"rvd": "#5dbe24" "rvd": "#5dbe24"
//"verygood": "#0b7d03" //"verygood": "#0b7d03"
}; };
chart.data = [ chart.data = [
{ {
...@@ -532,7 +535,7 @@ am4core.ready(function() { ...@@ -532,7 +535,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 2173.95 "value": 2173.95
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2015", "y": "2015",
...@@ -545,7 +548,7 @@ am4core.ready(function() { ...@@ -545,7 +548,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 494.67 "value": 494.67
}, },
{ {
"x": "Bajo", "x": "Bajo",
"y": "2015", "y": "2015",
...@@ -564,7 +567,7 @@ am4core.ready(function() { ...@@ -564,7 +567,7 @@ am4core.ready(function() {
"region": "San Luis Potosí", "region": "San Luis Potosí",
"color": colors.slp, "color": colors.slp,
"value": 173.51 "value": 173.51
}, },
{ {
"x": "Bajo", "x": "Bajo",
"y": "2015", "y": "2015",
...@@ -597,7 +600,7 @@ am4core.ready(function() { ...@@ -597,7 +600,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 2443.30 "value": 2443.30
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2016", "y": "2016",
...@@ -610,7 +613,7 @@ am4core.ready(function() { ...@@ -610,7 +613,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 626.42 "value": 626.42
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2016", "y": "2016",
...@@ -623,7 +626,7 @@ am4core.ready(function() { ...@@ -623,7 +626,7 @@ am4core.ready(function() {
"region": "San Luis Potosí", "region": "San Luis Potosí",
"color": colors.slp, "color": colors.slp,
"value": 233.55 "value": 233.55
}, },
{ {
"x": "Bajo", "x": "Bajo",
"y": "2016", "y": "2016",
...@@ -656,7 +659,7 @@ am4core.ready(function() { ...@@ -656,7 +659,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 2694.58 "value": 2694.58
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2017", "y": "2017",
...@@ -669,7 +672,7 @@ am4core.ready(function() { ...@@ -669,7 +672,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 748.70 "value": 748.70
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2017", "y": "2017",
...@@ -682,7 +685,7 @@ am4core.ready(function() { ...@@ -682,7 +685,7 @@ am4core.ready(function() {
"region": "San Luis Potosí", "region": "San Luis Potosí",
"color": colors.slp, "color": colors.slp,
"value": 326.59 "value": 326.59
}, },
{ {
"x": "Bajo", "x": "Bajo",
"y": "2017", "y": "2017",
...@@ -715,7 +718,7 @@ am4core.ready(function() { ...@@ -715,7 +718,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 2997.31 "value": 2997.31
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2018", "y": "2018",
...@@ -728,7 +731,7 @@ am4core.ready(function() { ...@@ -728,7 +731,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 888.27 "value": 888.27
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2018", "y": "2018",
...@@ -741,7 +744,7 @@ am4core.ready(function() { ...@@ -741,7 +744,7 @@ am4core.ready(function() {
"region": "San Luis Potosí", "region": "San Luis Potosí",
"color": colors.slp, "color": colors.slp,
"value": 427.07 "value": 427.07
}, },
{ {
"x": "Bajo", "x": "Bajo",
"y": "2018", "y": "2018",
...@@ -774,7 +777,7 @@ am4core.ready(function() { ...@@ -774,7 +777,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 3179.72 "value": 3179.72
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2019", "y": "2019",
...@@ -787,7 +790,7 @@ am4core.ready(function() { ...@@ -787,7 +790,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 1035.34 "value": 1035.34
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2019", "y": "2019",
...@@ -800,7 +803,7 @@ am4core.ready(function() { ...@@ -800,7 +803,7 @@ am4core.ready(function() {
"region": "San Luis Potosí", "region": "San Luis Potosí",
"color": colors.slp, "color": colors.slp,
"value": 504.66 "value": 504.66
}, },
{ {
"x": "Bajo", "x": "Bajo",
"y": "2019", "y": "2019",
...@@ -833,7 +836,7 @@ am4core.ready(function() { ...@@ -833,7 +836,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 3441.99 "value": 3441.99
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2020", "y": "2020",
...@@ -846,7 +849,7 @@ am4core.ready(function() { ...@@ -846,7 +849,7 @@ am4core.ready(function() {
"region": "Aguascalientes", "region": "Aguascalientes",
"color": colors.ags, "color": colors.ags,
"value": 1143.06 "value": 1143.06
}, },
{ {
"x": "Medio", "x": "Medio",
"y": "2020", "y": "2020",
...@@ -859,7 +862,7 @@ am4core.ready(function() { ...@@ -859,7 +862,7 @@ am4core.ready(function() {
"region": "San Luis Potosí", "region": "San Luis Potosí",
"color": colors.slp, "color": colors.slp,
"value": 574.99 "value": 574.99
}, },
{ {
"x": "Bajo", "x": "Bajo",
"y": "2020", "y": "2020",
...@@ -881,19 +884,19 @@ am4core.ready(function() { ...@@ -881,19 +884,19 @@ am4core.ready(function() {
} }
]; ];
var baseWidth = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight); var baseWidth = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
var maxRadius = baseWidth / Math.sqrt(chart.data.length)/1 - 0; // 2 is jast a margin var maxRadius = baseWidth / Math.sqrt(chart.data.length)/1 - 0; // 2 is jast a margin
series.heatRules.push({ min: 2, max: maxRadius, property: "radius", target: bullet1.circle }); series.heatRules.push({ min: 2, max: maxRadius, property: "radius", target: bullet1.circle });
chart.plotContainer.events.on("maxsizechanged", function() { chart.plotContainer.events.on("maxsizechanged", function() {
var side = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight); var side = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
bullet1.circle.clones.each(function(clone) { bullet1.circle.clones.each(function(clone) {
clone.scale = side / baseWidth; clone.scale = side / baseWidth;
}) })
}) })
let legend = new am4charts.Legend(); let legend = new am4charts.Legend();
legend.parent = chart.chartContainer; legend.parent = chart.chartContainer;
legend.labels.template.fill = am4core.color(mainTextColor); legend.labels.template.fill = am4core.color(mainTextColor);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment