Skip to content

Add 'useHtml' option to allow HTML in legendNames #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arambert wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add 'useHtml' option to allow HTML in legendNames #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ new Chartist.Bar('.ct-chart', data, {
| `className` | Adds a class to the `ul` element. | `string` | `''` |
| `clickable` | Sets the legends clickable state; setting this value to `false` disables toggling graphs on legend click. | `bool` | `true` |
| `legendNames` | Sets custom legend names. By default the `name` property of the series will be used if none are given. Multiple series can be associated with a legend item using this property as well. See examples for more details. | `mixed` | `false` |
| `useHtml` | Allows HTML in legends, useful when used alongside legendNames. | `boolean` | `false` |
| `onClick` | Accepts a function that gets invoked if `clickable` is true. The function has the `chart`, and the click event (`e`), as arguments. | `mixed` | `false` |
| `classNames` | Accepts a array of strings as long as the chart's series, those will be added as classes to the `li` elements. | `mixed` | `false` |
| `removeAll` | Allow all series to be removed at once. | `bool` | `false` |
Expand Down
7 changes: 6 additions & 1 deletion chartist-plugin-legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
classNames: false,
removeAll: false,
legendNames: false,
useHtml: false,
clickable: true,
onClick: null,
position: 'top'
Expand Down Expand Up @@ -118,7 +119,11 @@
li.classList.add(options.classNames[i]);
}
li.setAttribute('data-legend', i);
li.textContent = legendText;
if (options.useHtml) {
li.innerHTML = legendText;
} else {
li.textContent = legendText;
}
return li;
}

Expand Down
34 changes: 29 additions & 5 deletions test/test.legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,30 @@ describe('Chartist plugin legend', function() {
});
});

it('should use custom HTML legend names if provided', function(done) {
var legendNames = ['Sheep <span>Big</span>', '<div class="some-class">are</div>', 'animals'];
chart = generateChart('Line', chartDataLine, { legendNames: legendNames, useHtml: true });

// Set a delay on the test to ensure it doesn't overlap with the plugin native 'created' handler
chart.on('created', function () {
setTimeout(function () {
var legendKey = 0;
var parent = chart.container.querySelector('ul.ct-legend');

expect(parent.childNodes.length).to.equal(3);
[].forEach.call(parent.childNodes, function (item)
{
expect(item.innerHTML).to.equal(legendNames[legendKey]);
legendKey += 1;
});

destroyChart();
done();

}, 10)
});
});

it('should use the data object name when labels are not defined', function (done) {
var chartDataNoLabels = {
labels: [], // adding empty arry because chartist.js converts null or undefined labels into empty array
Expand Down Expand Up @@ -435,14 +459,14 @@ describe('Chartist plugin legend', function() {

click(seriesB);
expect(chart.legendClicked).to.equal(true);

//Clicking on an inactive series should also call the function.
chart.legendClicked = false;
click(seriesB);
expect(chart.legendClicked).to.equal(true);
});
});

describe('clickable with multiple series per legend item', function() {
before(function(done) {
chart = generateChart('Line', chartDataLine, {
Expand Down Expand Up @@ -490,7 +514,7 @@ describe('Chartist plugin legend', function() {
expect(svgSeries2[0].className.baseVal).to.contain('ct-series-a');
expect(svgSeries2[1].className.baseVal).to.contain('ct-series-b');
expect(svgSeries2[2].className.baseVal).to.contain('ct-series-c');

// Clicking on the first legend item should hide the two first series:
click(seriesA);
expect(chart.data.series.length).to.equal(1);
Expand Down Expand Up @@ -549,14 +573,14 @@ describe('Chartist plugin legend', function() {

click(seriesB);
expect(chart.legendClicked).to.equal(true);

//Clicking on an inactive series should also call the function.
chart.legendClicked = false;
click(seriesB);
expect(chart.legendClicked).to.equal(true);
});
});

describe('clickable for a pie', function() {
before(function(done) {
chart = generateChart('Pie', chartDataPie, {
Expand Down