-
Notifications
You must be signed in to change notification settings - Fork 478
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement multiple labels per data element
- Loading branch information
1 parent
9bd22fa
commit e1347fc
Showing
30 changed files
with
971 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| # Labels | ||
|
|
||
| By default, a single label is created per data, however, it's possible to define multiple labels for each data element using the `labels` options. This option is an object where each property represents a new label, the key being the label key and the value being the options specific to each label. These options are merged on top of the options defined at the chart **and** dataset levels. | ||
|
|
||
| ## Multiple Labels | ||
|
|
||
| The following snippet creates two labels for every data element, the first with `title` as key and the second with `value` as key. The `title` label text is blue with font in bold. The `value` label text is green with normal font. | ||
|
|
||
| ```js | ||
| { | ||
| options: { | ||
| plugins: { | ||
| datalabels: { | ||
| color: 'blue', | ||
| labels: { | ||
| title: { | ||
| font: { | ||
| weight: 'bold' | ||
| } | ||
| }, | ||
| value: { | ||
| color: 'green' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Dataset Overrides | ||
|
|
||
| While the previous example creates multiple labels with the same options for all datasets, it's possible to add, modify and remove labels for specific datasets by referring to the label key. | ||
|
|
||
| ### Modifying Labels | ||
|
|
||
| To modify a label for a specific dataset, create an entry in the `labels` dataset options using the same key: | ||
|
|
||
| ```js | ||
| { | ||
| data: { | ||
| datasets: [{ | ||
| // First dataset. | ||
| datalabels: { | ||
| color: 'yellow' | ||
| } | ||
| }, { | ||
| // Second dataset. | ||
| datalabels: { | ||
| labels: { | ||
| title: { | ||
| color: 'green' | ||
| } | ||
| } | ||
| } | ||
| }] | ||
| }, | ||
| options: { | ||
| plugins: { | ||
| datalabels: { | ||
| color: 'pink', | ||
| labels: { | ||
| value: {}, | ||
| title: { | ||
| color: 'blue' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| This example creates for each data element in the *first* dataset: | ||
| - a `value` label with text in yellow | ||
| - a `title` label with text in blue | ||
|
|
||
| and for each data element in the *second* dataset: | ||
| - a `value` label with text in pink | ||
| - a `title` label with text in green | ||
|
|
||
| ::: warning IMPORTANT | ||
| Options defined under each `labels.<key>` always override options defined at the chart **and** dataset level (in the previous example, the `title` label text of the *first* dataset is blue, not yellow). | ||
| ::: | ||
|
|
||
| ### Adding Label | ||
|
|
||
| To add a new label to a specific dataset, create an entry under the `labels` dataset options using a *inexistent* label key. The following example creates one label (`title`) for each data element in the *first* dataset and two labels (`title` and `value`) for each data element in the *second* dataset: | ||
|
|
||
| ```js | ||
| { | ||
| data: { | ||
| datasets: [{ | ||
| // First dataset. | ||
| }, { | ||
| // Second dataset. | ||
| datalabels: { | ||
| labels: { | ||
| value: { | ||
| color: 'green' | ||
| } | ||
| } | ||
| } | ||
| }] | ||
| }, | ||
| options: { | ||
| plugins: { | ||
| datalabels: { | ||
| labels: { | ||
| title: { | ||
| color: 'blue' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Removing Label | ||
|
|
||
| To remove a label for a specific dataset, create an `null` entry under the `labels` dataset options for the key of the label to remove. The following example removes the `title` label in the *second* dataset: | ||
|
|
||
| ```js | ||
| { | ||
| data: { | ||
| datasets: [{ | ||
| // First dataset. | ||
| }, { | ||
| // Second dataset. | ||
| datalabels: { | ||
| labels: { | ||
| title: null | ||
| } | ||
| } | ||
| }] | ||
| }, | ||
| options: { | ||
| plugins: { | ||
| datalabels: { | ||
| labels: { | ||
| title: { | ||
| color: 'blue' | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" type="text/css" href="../style.css"> | ||
| <link rel="icon" type="image/ico" href="../favicon.ico"> | ||
| <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.0/dist/Chart.min.js"></script> | ||
| <script src="../../dist/chartjs-plugin-datalabels.js"></script> | ||
| <script src="../utils.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="side"> | ||
| <div id="header"></div> | ||
| <div id="actions"> | ||
| <button onclick="randomize(this)">Randomize</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="charts"> | ||
| <div class="wrapper"><canvas id="chart-0"></canvas></div> | ||
| </div> | ||
|
|
||
| <script> | ||
| var SAMPLE_INFO = { | ||
| group: 'Advanced', | ||
| name: 'Multiple Labels', | ||
| desc: 'This example displays 3 labels per data, one for the ' | ||
| + 'index, one for the label and one for the value. Move ' | ||
| + 'the mouse over the chart to display label ids.' | ||
| }; | ||
| </script> | ||
|
|
||
| <script id="script-init"> | ||
| var DATA_COUNT = 4; | ||
| var labels = [ | ||
| 'Earth', | ||
| 'Mars', | ||
| 'Saturn', | ||
| 'Jupiter' | ||
| ]; | ||
|
|
||
| Samples.srand(4); | ||
|
|
||
| Chart.helpers.merge(Chart.defaults.global, { | ||
| aspectRatio: 4 / 3, | ||
| tooltips: false, | ||
| layout: { | ||
| padding: { | ||
| top: 42, | ||
| right: 16, | ||
| bottom: 32, | ||
| left: 8 | ||
| } | ||
| }, | ||
| elements: { | ||
| line: { | ||
| fill: false | ||
| }, | ||
| point: { | ||
| hoverRadius: 7, | ||
| radius: 5 | ||
| } | ||
| }, | ||
| plugins: { | ||
| legend: false, | ||
| title: false | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <script id="script-construct"> | ||
| var chart = new Chart('chart-0', { | ||
| type: 'doughnut', | ||
| data: { | ||
| labels: labels, | ||
| datasets: [{ | ||
| backgroundColor: Samples.colors({ | ||
| color: Samples.color(1), | ||
| mode: 'darken' | ||
| }), | ||
| hoverBorderColor: 'white', | ||
| data: Samples.numbers({ | ||
| count: DATA_COUNT, | ||
| min: 0, | ||
| max: 100 | ||
| }), | ||
| datalabels: { | ||
| labels: { | ||
| index: { | ||
| align: 'end', | ||
| anchor: 'end', | ||
| color: function(ctx) { | ||
| return ctx.dataset.backgroundColor; | ||
| }, | ||
| font: {size: 18}, | ||
| formatter: function(value, ctx) { | ||
| return ctx.active | ||
| ? 'index' | ||
| : '#' + (ctx.dataIndex + 1); | ||
| }, | ||
| offset: 8, | ||
| opacity: function(ctx) { | ||
| return ctx.active ? 1 : 0.5; | ||
| } | ||
| }, | ||
| name: { | ||
| align: 'top', | ||
| font: {size: 16}, | ||
| formatter: function(value, ctx) { | ||
| return ctx.active | ||
| ? 'name' | ||
| : ctx.chart.data.labels[ctx.dataIndex]; | ||
| } | ||
| }, | ||
| value: { | ||
| align: 'bottom', | ||
| backgroundColor: function(ctx) { | ||
| var value = ctx.dataset.data[ctx.dataIndex]; | ||
| return value > 50 ? 'white' : null; | ||
| }, | ||
| borderColor: 'white', | ||
| borderWidth: 2, | ||
| borderRadius: 4, | ||
| color: function(ctx) { | ||
| var value = ctx.dataset.data[ctx.dataIndex]; | ||
| return value > 50 | ||
| ? ctx.dataset.backgroundColor | ||
| : 'white'; | ||
| }, | ||
| formatter: function(value, ctx) { | ||
| return ctx.active | ||
| ? 'value' | ||
| : Math.round(value * 1000) / 1000; | ||
| }, | ||
| padding: 4 | ||
| } | ||
| } | ||
| } | ||
| }] | ||
| }, | ||
| options: { | ||
| cutoutPercentage: 8, | ||
| padding: 64, | ||
| plugins: { | ||
| datalabels: { | ||
| color: 'white', | ||
| display: function(ctx) { | ||
| return ctx.dataset.data[ctx.dataIndex] > 10; | ||
| }, | ||
| font: {weight: 'bold'}, | ||
| offset: 0, | ||
| padding: 0 | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <script id="script-actions"> | ||
| function randomize() { | ||
| chart.data.datasets.forEach(function(dataset, i) { | ||
| dataset.backgroundColor = Samples.colors({ | ||
| color: Samples.color(), | ||
| mode: 'darken' | ||
| }); | ||
| dataset.data = dataset.data.map(function(value) { | ||
| return Samples.rand(0, 100); | ||
| }); | ||
| }); | ||
| chart.update(); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.