archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Enhance legend label color point when usePointStyle is true (#6006)

Browse Source
This commit is contained in:
Alfie Hopkin 2019-02-10 18:04:29 +00:00 committed by Simon Brunel
parent 409fdde3b0
commit af464f8a85
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/configuration/legend.md
View File

@ -36,7 +36,7 @@ The legend label configuration is nested below the legend configuration using th
| `padding` | `number` | `10` | Padding between rows of colored boxes.
| `generateLabels` | `function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
| `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize).
## Legend Item Interface

11
src/plugins/plugin.legend.js
View File

@ -90,8 +90,8 @@ defaults._set('global', {
* @return {Number} width of the color box area
*/
function getBoxWidth(labelOpts, fontSize) {
return labelOpts.usePointStyle ?
fontSize * Math.SQRT2 :
return labelOpts.usePointStyle && labelOpts.boxWidth > fontSize ?
fontSize :
labelOpts.boxWidth;
}
@ -369,10 +369,9 @@ var Legend = Element.extend({
if (opts.labels && opts.labels.usePointStyle) {
// Recalculate x and y for drawPoint() because its expecting
// x and y to be center of figure (instead of top left)
var radius = fontSize * Math.SQRT2 / 2;
var offSet = radius / Math.SQRT2;
var centerX = x + offSet;
var centerY = y + offSet;
var radius = boxWidth * Math.SQRT2 / 2;
var centerX = x + boxWidth / 2;
var centerY = y + fontSize / 2;
// Draw pointStyle as legend symbol
helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);