Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 20:29:12 +02:00
Code Issues Packages Projects Releases Wiki Activity
ee7520b710
Chart.js/samples/legend/positioning.html

122 lines
2.5 KiB
HTML
Raw Normal View History

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
<!doctype html>
<html>
<head>
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
<title>Legend Positions</title>
Use `Chart.min.js` in samples (#5958) Samples are supposed to show good practices and in most cases we don't use the time scale but require `Chart.bundle.js`, which is not correct. Instead, we should require the non-bundled version in its minified version (`Chart.min.js`). Paradoxically, time based examples don't use `Chart.bundle.js` but require moment manually side to `Chart.min.js`, which IMO is also the correct way since it allows users to configure and use moment globally (TZ, locales, etc.) and doesn't enforce a specific moment version. Also remove the `data-labelling.html` example because we now have an [official plugin](https://github.com/chartjs/chartjs-plugin-datalabels) that implements this feature and don't want to deal with user custom code anymore.
2019-01-06 15:56:58 +01:00
<script src="../../dist/Chart.min.js"></script>
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
<script src="../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.chart-container {
width: 500px;
margin-left: 40px;
margin-right: 40px;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
</style>
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
</head>
<body>
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
<div class="container">
<div class="chart-container">
<canvas id="chart-legend-top"></canvas>
</div>
<div class="chart-container">
<canvas id="chart-legend-right"></canvas>
</div>
<div class="chart-container">
<canvas id="chart-legend-bottom"></canvas>
</div>
<div class="chart-container">
<canvas id="chart-legend-left"></canvas>
</div>
</div>
<script>
var color = Chart.helpers.color;
function createConfig(legendPosition, colorName) {
return {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
borderColor: window.chartColors[colorName],
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
position: legendPosition,
},
scales: {
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back
2019-11-22 00:46:49 +01:00
x: {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back
2019-11-22 00:46:49 +01:00
},
y: {
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back
2019-11-22 00:46:49 +01:00
}
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
},
title: {
display: true,
text: 'Legend Position: ' + legendPosition
}
}
};
}
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
Setup HTML and JS linters for samples (#5195)
2018-02-03 13:28:54 +01:00
window.onload = function() {
[{
id: 'chart-legend-top',
legendPosition: 'top',
color: 'red'
}, {
id: 'chart-legend-right',
legendPosition: 'right',
color: 'blue'
}, {
id: 'chart-legend-bottom',
legendPosition: 'bottom',
color: 'green'
}, {
id: 'chart-legend-left',
legendPosition: 'left',
color: 'yellow'
}].forEach(function(details) {
var ctx = document.getElementById(details.id).getContext('2d');
var config = createConfig(details.legendPosition, details.color);
new Chart(ctx, config);
});
};
</script>
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
2016-10-21 05:12:10 +02:00
</body>
</html>
Reference in New Issue Copy Permalink