diff --git a/chartjs/chart-tests.ts b/chartjs/chart-tests.ts
index 585770334..58dead8f9 100644
--- a/chartjs/chart-tests.ts
+++ b/chartjs/chart-tests.ts
@@ -1,3 +1,48 @@
+///
+
+Chart.defaults.global = {
+ animation: true,
+ animationSteps: 60,
+ animationEasing: "easeOutQuart",
+ showScale: true,
+ scaleOverride: false,
+ scaleSteps: null,
+ scaleStepWidth: null,
+ scaleStartValue: null,
+ scaleLineColor: "rgba(0,0,0,.1)",
+ scaleLineWidth: 1,
+ scaleShowLabels: true,
+ scaleLabel: "<%=value%>",
+ scaleIntegersOnly: true,
+ scaleBeginAtZero: false,
+ scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+ scaleFontSize: 12,
+ scaleFontStyle: "normal",
+ scaleFontColor: "#666",
+ responsive: false,
+ maintainAspectRatio: true,
+ showTooltips: true,
+ tooltipEvents: ["mousemove", "touchstart", "touchmove"],
+ tooltipFillColor: "rgba(0,0,0,0.8)",
+ tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+ tooltipFontSize: 14,
+ tooltipFontStyle: "normal",
+ tooltipFontColor: "#fff",
+ tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+ tooltipTitleFontSize: 14,
+ tooltipTitleFontStyle: "bold",
+ tooltipTitleFontColor: "#fff",
+ tooltipYPadding: 6,
+ tooltipXPadding: 6,
+ tooltipCaretSize: 8,
+ tooltipCornerRadius: 6,
+ tooltipXOffset: 10,
+ tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
+ multiTooltipTemplate: "<%= value %>",
+ onAnimationProgress: function () { },
+ onAnimationComplete: function () { }
+}
+
var lineData: LinearChartData = {
labels: ['03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00'],
datasets: [
@@ -24,6 +69,32 @@ var lineData: LinearChartData = {
]
};
+var myLineChart = new Chart(ctx).Line(lineData, {
+ scaleShowGridLines: true,
+ scaleGridLineColor: "rgba(0,0,0,.05)",
+ scaleGridLineWidth: 1,
+ bezierCurve: true,
+ bezierCurveTension: 0.4,
+ pointDot: true,
+ pointDotRadius: 4,
+ pointDotStrokeWidth: 1,
+ pointHitDetectionRadius: 20,
+ datasetStroke: true,
+ datasetStrokeWidth: 2,
+ datasetFill: true,
+ legendTemplate: "
-legend\"><% for (var i=0; i- \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
<%}%>
"
+});
+
+var myLineChartLegend: string = myLineChart.generateLegend();
+var myLineChartImage: string = myLineChart.toBase64Image();
+myLineChart.addData([1, 2, 3, 4, 5, 6, 7], 'new');
+myLineChart.clear();
+myLineChart.removeData();
+myLineChart.resize();
+myLineChart.update();
+myLineChart.stop();
+myLineChart.destroy();
+
var barData: LinearChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
@@ -46,7 +117,27 @@ var barData: LinearChartData = {
]
};
-var myBarChart = new Chart(ctx).Bar(barData);
+var myBarChart = new Chart(ctx).Bar(barData, {
+ scaleBeginAtZero: true,
+ scaleShowGridLines: true,
+ scaleGridLineColor: "rgba(0,0,0,.05)",
+ scaleGridLineWidth: 1,
+ barShowStroke: true,
+ barStrokeWidth: 2,
+ barValueSpacing: 5,
+ barDatasetSpacing: 1,
+ legendTemplate: "-legend\"><% for (var i=0; i- \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
<%}%>
"
+});
+
+var myBarChartLegend: string = myBarChart.generateLegend();
+var myBarChartImage: string = myBarChart.toBase64Image();
+myBarChart.addData([1, 2, 3, 4, 5, 6, 7], 'new');
+myBarChart.clear();
+myBarChart.removeData();
+myBarChart.resize();
+myBarChart.update();
+myBarChart.stop();
+myBarChart.destroy();
var radarData: LinearChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
@@ -74,7 +165,36 @@ var radarData: LinearChartData = {
]
};
-var myRadarChart = new Chart(ctx).Radar(radarData);
+var myRadarChart = new Chart(ctx).Radar(radarData, {
+ scaleShowLine: true,
+ angleShowLineOut: true,
+ scaleShowLabels: false,
+ scaleBeginAtZero: true,
+ angleLineColor: "rgba(0,0,0,.1)",
+ angleLineWidth: 1,
+ pointLabelFontFamily: "'Arial'",
+ pointLabelFontStyle: "normal",
+ pointLabelFontSize: 10,
+ pointLabelFontColor: "#666",
+ pointDot: true,
+ pointDotRadius: 3,
+ pointDotStrokeWidth: 1,
+ pointHitDetectionRadius: 20,
+ datasetStroke: true,
+ datasetStrokeWidth: 2,
+ datasetFill: true,
+ legendTemplate: "-legend\"><% for (var i=0; i- \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
<%}%>
"
+});
+
+var myRadarChartLegend: string = myRadarChart.generateLegend();
+var myRadarChartImage: string = myRadarChart.toBase64Image();
+myRadarChart.addData([1, 2, 3, 4, 5, 6, 7], 'new');
+myRadarChart.clear();
+myRadarChart.removeData();
+myRadarChart.resize();
+myRadarChart.update();
+myRadarChart.stop();
+myRadarChart.destroy();
var polarAreaData: CircularChartData[] = [
{
@@ -110,7 +230,37 @@ var polarAreaData: CircularChartData[] = [
];
-var myPolarAreaChart = new Chart(ctx).PolarArea(polarAreaData);
+var myPolarAreaChart = new Chart(ctx).PolarArea(polarAreaData, {
+ scaleShowLabelBackdrop: true,
+ scaleBackdropColor: "rgba(255,255,255,0.75)",
+ scaleBeginAtZero: true,
+ scaleBackdropPaddingY: 2,
+ scaleBackdropPaddingX: 2,
+ scaleShowLine: true,
+ segmentShowStroke: true,
+ segmentStrokeColor: "#fff",
+ segmentStrokeWidth: 2,
+ animationSteps: 100,
+ animationEasing: "easeOutBounce",
+ animateRotate: true,
+ animateScale: false,
+ legendTemplate: "-legend\"><% for (var i=0; i- \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
<%}%>
"
+});
+
+var myPolarAreaChartLegend: string = myPolarAreaChart.generateLegend();
+var myPolarAreaChartImage: string = myPolarAreaChart.toBase64Image();
+myPolarAreaChart.addData([{
+ value: 120,
+ color: "#4D5360",
+ highlight: "#616774",
+ label: "Dark Grey"
+}], 0);
+myPolarAreaChart.clear();
+myPolarAreaChart.removeData(0);
+myPolarAreaChart.resize();
+myPolarAreaChart.update();
+myPolarAreaChart.stop();
+myPolarAreaChart.destroy();
var pieData: CircularChartData[] = [
{
@@ -134,7 +284,57 @@ var pieData: CircularChartData[] = [
];
// For a pie chart
-var myPieChart = new Chart(ctx[0]).Pie(pieData);
+var myPieChart = new Chart(ctx[0]).Pie(pieData, {
+ segmentShowStroke: true,
+ segmentStrokeColor: "#fff",
+ segmentStrokeWidth: 2,
+ percentageInnerCutout: 0,
+ animationSteps: 100,
+ animationEasing: "easeOutBounce",
+ animateRotate: true,
+ animateScale: false,
+ legendTemplate: "-legend\"><% for (var i=0; i- \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
<%}%>
"
+});
+
+var myPieChartLegend: string = myPieChart.generateLegend();
+var myPieChartImage: string = myPieChart.toBase64Image();
+myPieChart.addData([{
+ value: 120,
+ color: "#4D5360",
+ highlight: "#616774",
+ label: "Dark Grey"
+}], 0);
+myPieChart.clear();
+myPieChart.removeData(0);
+myPieChart.resize();
+myPieChart.update();
+myPieChart.stop();
+myPieChart.destroy();
// And for a doughnut chart
-var myDoughnutChart = new Chart(ctx[1]).Doughnut(pieData);
+var myDoughnutChart = new Chart(ctx[1]).Doughnut(pieData, {
+ segmentShowStroke: true,
+ segmentStrokeColor: "#fff",
+ segmentStrokeWidth: 2,
+ percentageInnerCutout: 50,
+ animationSteps: 100,
+ animationEasing: "easeOutBounce",
+ animateRotate: true,
+ animateScale: false,
+ legendTemplate: "-legend\"><% for (var i=0; i- \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
<%}%>
"
+});
+
+var myDoughnutChartLegend: string = myDoughnutChart.generateLegend();
+var myDoughnutChartImage: string = myDoughnutChart.toBase64Image();
+myPieChart.addData([{
+ value: 120,
+ color: "#4D5360",
+ highlight: "#616774",
+ label: "Dark Grey"
+}], 0);
+myDoughnutChart.clear();
+myDoughnutChart.removeData(0);
+myDoughnutChart.resize();
+myDoughnutChart.update();
+myDoughnutChart.stop();
+myDoughnutChart.destroy();