Skip to content

Conversation

@Quentame
Copy link
Member

@Quentame Quentame commented Oct 24, 2025

fixes #926 & fixes #973

How:

  • Explicitly activate chart responsive mode
  • use plugins.legend.position = "bottom" to move legend bellow the chart to let move space for both the chart and the legend
  • use plugins.legend.labels.usePointStyle = true to reduce the legend item width (and better align with the chart style)
  • For the extreme case of versionHistoryChart graph: use aspectRatio to let more vertical space for the graph (desktop) and for te legend (mobile)

A better solution would be to create/use an HTML Legend Plugin that will allow to pull the legend out of the Chart canvas, sort items, and scroll on items (doc), I've already did that on a project but it takes more time, will do it later.

Also:

  • Code style cleanup with better reusability
  • Avoid inline styling
  • Factorise plugins.tooltip.callbacks.footer into tooltipFooterCallback()
  • Change the div ID for the installations per countries from svgMap (?) to installationsPerCountry

ChartJS Doc:

BEFORE AFTER
desktop image desktop image
mobile iPhone 12 Pro (width: 390px) image mobile iPhone 12 Pro (width: 390px) image

@Quentame Quentame force-pushed the fix/responsive_graphs branch from 303f830 to 990ed50 Compare October 27, 2025 13:39
@Quentame Quentame mentioned this pull request Oct 27, 2025
@Quentame Quentame marked this pull request as ready for review October 27, 2025 14:00
@Quentame Quentame requested a review from ludeeus October 28, 2025 15:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Missing screen mover (data not showed completelly) Version History table missing labels

1 participant