JoséCarlosMartínez
Posts: 25
Joined: Sun Mar 28, 2021 8:12 pm

Re: Personalización "scatter"

piotr.m wrote: Mon Apr 12, 2021 7:36 am Hi,

Maybe the allowOverlap parameter will help in your case?
https://api.highcharts.com/highcharts/p ... lowOverlap

You can also see other similar topics about label overlap:
https://stackoverflow.com/questions/193 ... ng-columns

Regards


hi,

I have tried, but without result:

Regards

Code: Select all


 hc_plotOptions(
  series = list(
   datalabels = list(
    allowOverlap=FALSE, crop=FALSE, overflow='none'
   )
  )
 ) %>%

JoséCarlosMartínez
Posts: 25
Joined: Sun Mar 28, 2021 8:12 pm

Re: Personalización "scatter"

JoséCarlosMartínez wrote: Mon Apr 12, 2021 12:05 pm
piotr.m wrote: Mon Apr 12, 2021 7:36 am Hi,

Maybe the allowOverlap parameter will help in your case?
https://api.highcharts.com/highcharts/p ... lowOverlap

You can also see other similar topics about label overlap:
https://stackoverflow.com/questions/193 ... ng-columns

Regards


hi,

I have tried, but without result:

Regards

Code: Select all


 hc_plotOptions(
  series = list(
   datalabels = list(
    allowOverlap=FALSE, crop=FALSE, overflow='none'
   )
  )
 ) %>%




Hi,

That setting I have tried doesn't make a lot of sense because it should be the default setting that should prevent the dataLabels from overlapping.

I don't know how to solve this problem.

Regards
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Personalización "scatter"

Hi,

Could you please provide your exact simplified example with data so that we can test it more thoroughly?

Best Regards
JoséCarlosMartínez
Posts: 25
Joined: Sun Mar 28, 2021 8:12 pm

Re: Personalización "scatter"

piotr.m wrote: Tue Apr 13, 2021 5:33 am Hi,

Could you please provide your exact simplified example with data so that we can test it more thoroughly?

Best Regards


Hi,

The code R:

Code: Select all


hc <- dfo %>%
 hchart(
  type = "scatter",
  hcaes(
   x = dfo$`Esfuerzo`,
   y = dfo$`Umbral`,
   size = dfo$`Relevancia` * 100,
   group = dfo$`Municipio`
   ),
  tooltip = list(
   valueDecimals = 2,
   valueSuffix = " %"
  )
 ) %>%

 hc_plotOptions(
  series = list(
   dataLabels = list(
    enabled=TRUE,
    #allowOverlap=FALSE, #Permitir que las etiquetas se superpongan.
    #format='{y:.2f}',
    format='{series.name}',
    style = list(
     textOutline = "none", #Contraste
     fontSize = "16px",
     fontFamily = "Raleway"
    ),
    color = "#2d2d2d"
   )
  )
 ) %>%

 hc_chart(
  events = list(load = JS("function() { 
   var chart = this; 
   chart.series[27].update({visible: false});
   chart.redraw();
   chart.reflow();
   }")
  )
 )
 
 hc


the data, dataframe, dfo con dget():

Code: Select all


structure(list(Código = c("02003", "03014", "04013", "05019", 
"06015", "07040", "08019", "09059", "10037", "11012", "12040", 
"13034", "14021", "15030", "16078", "17079", "18087", "19130", 
"21041", "22125", "23050", "24089", "25120", "26089", "27028", 
"28079", "29067", "30030", "32054", "33044", "34120", "35016", 
"36038", "37274", "38038", "39075", "40194", "41091", "42173", 
"43148", "44216", "45168", "46250", "47186", "49275", "50297", 
"51001", "52001"), Municipio = c("Albacete", "Alicante/Alacant", 
"Almería", "Ávila", "Badajoz", "Palma", "Barcelona", "Burgos", 
"Cáceres", "Cádiz", "Castellón de la Plana/Castelló de la Plana", 
"Ciudad Real", "Córdoba", "Coruña (A)", "Cuenca", "Girona", "Granada", 
"Guadalajara", "Huelva", "Huesca", "Jaén", "León", "Lleida", 
"Logroño", "Lugo", "Madrid", "Málaga", "Murcia", "Ourense", "Oviedo", 
"Palencia", "Palmas de Gran Canaria (Las)", "Pontevedra", "Salamanca", 
"Santa Cruz de Tenerife", "Santander", "Segovia", "Sevilla", 
"Soria", "Tarragona", "Teruel", "Toledo", "Valencia", "Valladolid", 
"Zamora", "Zaragoza", "Ceuta", "Melilla"), Esfuerzo = c(66.255518296917, 
55.4505971732305, 67.3396882117212, 159.444527678894, 39.9208624778303, 
75.6407281816124, 191.885593614053, 66.4060669160645, 41.5696869168135, 
131.928027073733, 70.8156033699513, 63.3576317305502, 99.9022751874716, 
92.1737310681322, 38.5831640425687, 91.7932459374022, 108.74338544486, 
42.8257587497772, 67.209950935465, 52.5816548264175, 102.778140636216, 
81.7958449372392, 87.2101693767431, 82.8515582299525, 64.2431323026685, 
116.244125268106, 95.4495291756444, 57.9232964761993, 74.9121459540308, 
75.0079722742974, 72.345751914009, 131.407698477426, 37.4719669533452, 
70.9266085324988, 119.707963542996, 56.4080210059843, 76.5130914290131, 
102.864800169414, 155.927878655384, 96.0587342879086, 57.0368704204712, 
43.3062216835242, 83.7300653585645, 68.8468635870744, 57.9772431037523, 
112.835558277614, 189.188525288669, 431.185251161171), Relevancia = c(0.0779438999416286, 
0.075567624299619, 0.0830963177638657, 0.181216919752304, 0.0645578573307309, 
0.0694739535415282, 0.11238222267336, 0.0591312044270579, 0.0549171188507039, 
0.107335017649502, 0.0672279971174195, 0.0622048291208239, 0.106492447121433, 
0.0989219226252717, 0.0434299324062133, 0.080124826578867, 0.0923126527122762, 
0.055862728725791, 0.0816954005957221, 0.0569671724881646, 0.0902113572693082, 
0.0760249770659709, 0.0786282259767798, 0.0920644595378507, 0.0827523660072055, 
0.0869155856787086, 0.0892429670963684, 0.0705333155849015, 0.0852996555846074, 
0.069397881679441, 0.0843127745258698, 0.151586054295292, 0.0464492613233081, 
0.0720415327066066, 0.119890097237675, 0.0503879549782981, 0.0624360563921389, 
0.0965284452003263, 0.159516287787606, 0.0739061270776166, 0.0694730992371514, 
0.0410407530273502, 0.0855901086450992, 0.0787793734678359, 0.0688139147586614, 
0.102143947795215, 0.0634263210053491, 0.149047512460091), Umbral = c(21, 
28.8, 30.3, 19.2, 24.4, 16.8, 15.4, 12.8, 19.4, 20.3, 20.7, 18.6, 
24.6, 16.5, 19.4, 18.2, 24.8, 16.8, 26.5, 16.2, 20.5, 16.9, 21.4, 
16.5, 19.3, 17.3, 27.9, 24, 19.8, 16.7, 15.1, 25.6, 19.9, 20.5, 
27, 17.8, 18.2, 24.9, 13.6, 19.3, 13.1, 14.5, 21.6, 15.1, 20.4, 
14.9, 34.8, 37)), class = "data.frame", row.names = c(NA, -48L
))

piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Personalización "scatter"

Hi,

Please send me the exact output you get for comparison.
Please also tell me exactly what environment are you using?

Best Regards
JoséCarlosMartínez
Posts: 25
Joined: Sun Mar 28, 2021 8:12 pm

Re: Personalización "scatter"

piotr.m wrote: Wed Apr 14, 2021 9:38 am Hi,

Please send me the exact output you get for comparison.
Please also tell me exactly what environment are you using?

Best Regards


Hi,

R version 4.0.3 (2020-10-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19042)

Matrix products: default

locale:
[1] LC_COLLATE=Spanish_Spain.1252 LC_CTYPE=Spanish_Spain.1252
[3] LC_MONETARY=Spanish_Spain.1252 LC_NUMERIC=C
[5] LC_TIME=Spanish_Spain.1252

attached base packages:
[1] stats graphics grDevices utils datasets methods base

other attached packages:
[1] highcharter_0.8.2 plotly_4.9.3 formattable_0.2.1 kableExtra_1.3.4
[5] DT_0.17 knitr_1.31 rmarkdown_2.7 forcats_0.5.1
[9] stringr_1.4.0 dplyr_1.0.4 purrr_0.3.4 readr_1.4.0
[13] tidyr_1.1.2 tibble_3.0.6 ggplot2_3.3.3 tidyverse_1.3.0

loaded via a namespace (and not attached):
[1] httr_1.4.2 jsonlite_1.7.2 viridisLite_0.3.0 modelr_0.1.8
[5] assertthat_0.2.1 TTR_0.24.2 cellranger_1.1.0 yaml_2.2.1
[9] pillar_1.5.0 backports_1.2.1 lattice_0.20-41 glue_1.4.2
[13] rlist_0.4.6.1 digest_0.6.27 rvest_0.3.6 colorspace_2.0-0
[17] htmltools_0.5.1.1 pkgconfig_2.0.3 broom_0.7.5 haven_2.3.1
[21] scales_1.1.1 webshot_0.5.2 svglite_2.0.0 generics_0.1.0
[25] ellipsis_0.3.1 withr_2.4.1 lazyeval_0.2.2 cli_2.3.1
[29] quantmod_0.4.18 magrittr_2.0.1 crayon_1.4.1 readxl_1.3.1
[33] evaluate_0.14 ps_1.6.0 fs_1.5.0 fansi_0.4.2
[37] xts_0.12.1 xml2_1.3.2 tools_4.0.3 data.table_1.14.0
[41] hms_1.0.0 lifecycle_1.0.0 munsell_0.5.0 reprex_1.0.0
[45] compiler_4.0.3 systemfonts_1.0.1 rlang_0.4.10 debugme_1.1.0
[49] grid_4.0.3 rstudioapi_0.13 htmlwidgets_1.5.3 igraph_1.2.6
[53] gtable_0.3.0 DBI_1.1.1 curl_4.3 R6_2.5.0
[57] zoo_1.8-8 lubridate_1.7.10 utf8_1.1.4 stringi_1.5.3
[61] Rcpp_1.0.6 vctrs_0.3.6 dbplyr_2.1.0 tidyselect_1.1.0
[65] xfun_0.21

Best Regards
Attachments
chart 2021-04-14 150919.png
chart 2021-04-14 150919.png (163.69 KiB) Viewed 484 times
JoséCarlosMartínez
Posts: 25
Joined: Sun Mar 28, 2021 8:12 pm

Re: Personalización "scatter"

piotr.m wrote: Wed Apr 14, 2021 9:38 am Hi,

Please send me the exact output you get for comparison.
Please also tell me exactly what environment are you using?

Best Regards


hi again

I have observed that if after the initial load I use the legend to show the series "Melilla", initially hidden (chart.series [27] .update ({visible: false});), then the "datalabels" are no longer overlapping .

Since this thread is very long, I want to remember that the overlap occurs when embedding the script into the load event from hc_chart.

Regards
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Personalización "scatter"

Hi,

Okay, so as I mentioned, you can try:

  • reduce the font size
  • set dataLabels manually: point.dataLabels.x and point.dataLabels.y
  • reduce the legend (add triangles for scrolling) to make more space

If you would arrange it with these three items that I have listed, maybe you could even show all dataLabels nicely (at least in the width you have now).
You can always just turn off dataLabeles (or show only some of them with allowingOverlap) and then users will read additional information from the tooltip. You could also shorten the text in dataLabels by displaying something shorter (like Bar instead of Barcelona) and display the rest in a tooltip.
You can also try using a different type of chart depending on your needs.

Kind Regards
JoséCarlosMartínez
Posts: 25
Joined: Sun Mar 28, 2021 8:12 pm

Re: Personalización "scatter"

hi,

Thanks for your interest, but I don't think I have explained myself well (the problem is my English).

The dataLabels are all shown "only" when I include the JS code associated with the load event in hc_chart to hide one of the series (Melilla).

The reason for initially hiding this "Melilla" series is because, as it is an extreme value, it prevents adequate visualization.

Therefore, the optimal solution is to initially hide that series, or others that may cause an overlapping visualization of the bubbles.

When there is overlap of the bubbles, that is not the problem, there is no overlap of the datalabels. As I indicate the overlap of the dataLabels only occurs when I use the load event in hc_chart. Only in that case.

When I don't include the code in the chart definition there is no overlap of the dataLabels. Highcharts shows only those for which there is no overlap.

From all that I explain I am convinced that the problem occurs during the processing (rendering) of the graph when load events are used in hc_chart.

Please, study this case, it is very likely that it will help more users of this great tool.

Sincerely. Greetings. Very grateful for your attention.
JoséCarlosMartínez
Posts: 25
Joined: Sun Mar 28, 2021 8:12 pm

Re: Personalización "scatter"

JoséCarlosMartínez wrote: Fri Apr 16, 2021 10:11 pm
Therefore, the optimal solution is to initially hide that series, or others that may cause an overlapping visualization of the bubbles.
Therefore, the optimal solution is to initially hide this series, or others that may cause "excessive concentration" of the bubbles. But the bubbles are not the problem. It is the overlapping of the datalabels that does not occur with the normal initial loading of highcharts.

In other words, to avoid an excessive concentration of the bubbles, it has been decided to hide from the load event of hc_chart (Is there another option?) The extreme value of the series "Melilla", and that causes the problem of overlapping dataLabels, That is produced by an unexpected behavior of highcharts, because in the rest of cases it distributes them properly to perfection.

Please, if you need more information, ask all that is necessary. I would like to properly solve this problem to improve, if possible, this great tool.

Sincerely.
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Personalización "scatter"

Hi,

From your description, it appears that this is not specifically related to Highcharter/R API but rather to the regular Highcharts behavior. If you feel that we should investigate this matter more under the Highcharts JS API please report it on our GitHub - describing and presenting the issue as accurately as possible:
https://github.com/highcharts/highchart ... new/choose

I believe it would be necessary to operate on an example directly in JavaScript, so best if you would reproduce this problem in an online editor such as JSFiddle. Here you can find a basic template: https://jsfiddle.net/BlackLabel/0pbeym97/

Thanks in advance!

Return to “Highcharts Usage”