Skip to content

Commit 9dcc732

Browse files
jatiny17jatiny17
committedNov 6, 2019
Legend Placement issue chartjs#6185 
1 parent 2c5fe3d commit 9dcc732

File tree

2 files changed

+164
-1
lines changed

2 files changed

+164
-1
lines changed
 

‎samples/legend/legend-placement.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Legend Callbacks</title>
4+
<title>Legend Placement</title>
55
<script src="../../dist/Chart.min.js"></script>
66
<script src="../utils.js"></script>
77
<style>

‎samples/scales/axes-labels.html

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Line Chart</title>
6+
<script src="../../dist/Chart.min.js"></script>
7+
<script src="../utils.js"></script>
8+
<style>
9+
canvas{
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div style="width:75%;">
19+
<canvas id="canvas"></canvas>
20+
</div>
21+
<br>
22+
<br>
23+
<button id="randomizeData">Randomize Data</button>
24+
<button id="addDataset">Add Dataset</button>
25+
<button id="removeDataset">Remove Dataset</button>
26+
<button id="addData">Add Data</button>
27+
<button id="removeData">Remove Data</button>
28+
<script>
29+
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
30+
var config = {
31+
type: 'line',
32+
data: {
33+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
34+
datasets: [{
35+
label: 'My First dataset',
36+
backgroundColor: window.chartColors.red,
37+
borderColor: window.chartColors.red,
38+
data: [
39+
randomScalingFactor(),
40+
randomScalingFactor(),
41+
randomScalingFactor(),
42+
randomScalingFactor(),
43+
randomScalingFactor(),
44+
randomScalingFactor(),
45+
randomScalingFactor()
46+
],
47+
fill: false,
48+
}, {
49+
label: 'My Second dataset',
50+
fill: false,
51+
backgroundColor: window.chartColors.blue,
52+
borderColor: window.chartColors.blue,
53+
data: [
54+
randomScalingFactor(),
55+
randomScalingFactor(),
56+
randomScalingFactor(),
57+
randomScalingFactor(),
58+
randomScalingFactor(),
59+
randomScalingFactor(),
60+
randomScalingFactor()
61+
],
62+
}]
63+
},
64+
options: {
65+
responsive: true,
66+
title: {
67+
display: true,
68+
text: 'Chart.js Line Chart'
69+
},
70+
tooltips: {
71+
mode: 'index',
72+
intersect: false,
73+
},
74+
hover: {
75+
mode: 'nearest',
76+
intersect: true
77+
},
78+
scales: {
79+
xAxes: [{
80+
display: true,
81+
scaleLabel: {
82+
display: true,
83+
labelString: 'Month'
84+
}
85+
}],
86+
yAxes: [{
87+
display: true,
88+
scaleLabel: {
89+
display: true,
90+
labelString: 'Value'
91+
}
92+
}]
93+
}
94+
}
95+
};
96+
97+
window.onload = function() {
98+
var ctx = document.getElementById('canvas').getContext('2d');
99+
window.myLine = new Chart(ctx, config);
100+
};
101+
102+
document.getElementById('randomizeData').addEventListener('click', function() {
103+
config.data.datasets.forEach(function(dataset) {
104+
dataset.data = dataset.data.map(function() {
105+
return randomScalingFactor();
106+
});
107+
108+
});
109+
110+
window.myLine.update();
111+
});
112+
113+
var colorNames = Object.keys(window.chartColors);
114+
document.getElementById('addDataset').addEventListener('click', function() {
115+
var colorName = colorNames[config.data.datasets.length % colorNames.length];
116+
var newColor = window.chartColors[colorName];
117+
var newDataset = {
118+
label: 'Dataset ' + config.data.datasets.length,
119+
backgroundColor: newColor,
120+
borderColor: newColor,
121+
data: [],
122+
fill: false
123+
};
124+
125+
for (var index = 0; index < config.data.labels.length; ++index) {
126+
newDataset.data.push(randomScalingFactor());
127+
}
128+
129+
config.data.datasets.push(newDataset);
130+
window.myLine.update();
131+
});
132+
133+
document.getElementById('addData').addEventListener('click', function() {
134+
if (config.data.datasets.length > 0) {
135+
var month = MONTHS[config.data.labels.length % MONTHS.length];
136+
config.data.labels.push(month);
137+
138+
config.data.datasets.forEach(function(dataset) {
139+
dataset.data.push(randomScalingFactor());
140+
});
141+
142+
window.myLine.update();
143+
}
144+
});
145+
146+
document.getElementById('removeDataset').addEventListener('click', function() {
147+
config.data.datasets.splice(0, 1);
148+
window.myLine.update();
149+
});
150+
151+
document.getElementById('removeData').addEventListener('click', function() {
152+
config.data.labels.splice(-1, 1); // remove the label first
153+
154+
config.data.datasets.forEach(function(dataset) {
155+
dataset.data.pop();
156+
});
157+
158+
window.myLine.update();
159+
});
160+
</script>
161+
</body>
162+
163+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.