Skip to content

Datalabels aligned differently in matrix chart #326

@evenfrost

Description

@evenfrost

While upgrading Chart.js to v3 and plugin libraries to their latest versions, I've noticed that data labels on my matrix charts become aligned differently than in pre v3.

Pre v3 Chart.js matrix chart with datalables

chart.js@2.9.4
chartjs-chart-matrix@0.1.3
chartjs-plugin-datalabels@0.7.0

JSFiddle

image

Note the datalables are aligned in the center of the matrix blocks with default settings.

v3 Chart.js matrix chart with datalables

chart.js@3.8.0
chartjs-chart-matrix@1.1.1
chartjs-plugin-datalabels@2.0.0

JSFiddle

image

Note the datalables are aligned to the top left corner of the matrix blocks with default settings. On other types of charts (e.g. bar) they are correctly placed as in the pre v3 version.

I've tried different modifications of position options (anchor, align, offset), but haven't succeeded to align them properly. Also I'm not sure if it's an issue of datalabels or matrix plugin (or not an issue at all, but different configuration), but would appreciate any help on it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions