Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/docs/configuration/legend.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ The legend label configuration is nested below the legend configuration using th
| `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.
| `sort` | `function` | `null` | Sorts legend items. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data.
| `pointStyle` | | | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true.
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size).

## Legend Title Configuration
Expand Down
7 changes: 4 additions & 3 deletions src/plugins/plugin.legend.js
Original file line number Diff line number Diff line change
Expand Up @@ -740,8 +740,9 @@ export default {
// lineWidth :
generateLabels(chart) {
const datasets = chart.data.datasets;
const options = chart.options.legend || {};
const usePointStyle = options.labels && options.labels.usePointStyle;
const {labels} = chart.legend.options;
const usePointStyle = labels.usePointStyle;
const overrideStyle = labels.pointStyle;

return chart._getSortedDatasetMetas().map((meta) => {
const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
Expand All @@ -756,7 +757,7 @@ export default {
lineJoin: style.borderJoinStyle,
lineWidth: style.borderWidth,
strokeStyle: style.borderColor,
pointStyle: style.pointStyle,
pointStyle: overrideStyle || style.pointStyle,
rotation: style.rotation,

// Below is extra data used for toggling the datasets
Expand Down
68 changes: 68 additions & 0 deletions test/specs/plugin.legend.tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -622,6 +622,74 @@ describe('Legend block tests', function() {
}]);
});

it('should draw correctly when usePointStyle is true and pointStyle override is set', function() {
var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
label: 'dataset1',
backgroundColor: '#f31',
borderCapStyle: 'butt',
borderDash: [2, 2],
borderDashOffset: 5.5,
borderWidth: 0,
borderColor: '#f31',
pointStyle: 'crossRot',
pointBackgroundColor: 'rgba(0,0,0,0.1)',
pointBorderWidth: 5,
pointBorderColor: 'green',
data: []
}, {
label: 'dataset2',
backgroundColor: '#f31',
borderJoinStyle: 'miter',
borderWidth: 2,
borderColor: '#f31',
pointStyle: 'crossRot',
pointRotation: 15,
data: []
}],
labels: []
},
options: {
legend: {
labels: {
usePointStyle: true,
pointStyle: 'star'
}
}
}
});

expect(chart.legend.legendItems).toEqual([{
text: 'dataset1',
fillStyle: 'rgba(0,0,0,0.1)',
hidden: false,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: 5,
strokeStyle: 'green',
pointStyle: 'star',
rotation: undefined,
datasetIndex: 0
}, {
text: 'dataset2',
fillStyle: '#f31',
hidden: false,
lineCap: undefined,
lineDash: undefined,
lineDashOffset: undefined,
lineJoin: undefined,
lineWidth: 2,
strokeStyle: '#f31',
pointStyle: 'star',
rotation: 15,
datasetIndex: 1
}]);
});

describe('config update', function() {
it ('should update the options', function() {
var chart = acquireChart({
Expand Down
5 changes: 5 additions & 0 deletions types/plugins/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,11 @@ export interface ILegendOptions {
*/
sort(a: ILegendItem, b: ILegendItem, data: IChartData): number;

/**
* Override point style for the legend. Only applies if usePointStyle is true
*/
pointStyle: PointStyle;

/**
* Label style will match corresponding point style (size is based on the mimimum value between boxWidth and font.size).
* @default false
Expand Down