mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Fix/area fill and chart titles (#8113)
* fixed fill for area chart stacked and title for charts where it wasn't in plugins yet * Chart defined in utils * added radar skip points example in the overview to go to
This commit is contained in:
parent
8220caaa43
commit
c3fbe5efc3
@ -42,9 +42,11 @@ function updateConfigByMutating(chart) {
|
||||
function updateConfigAsNewObject(chart) {
|
||||
chart.options = {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -33,9 +33,11 @@ const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
// data: ...
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart Title'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart Title'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -58,9 +58,11 @@
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Animation Progress Bar'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Animation Progress Bar'
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 2000,
|
||||
|
||||
@ -86,10 +86,12 @@
|
||||
}]
|
||||
},
|
||||
options: Chart.helpers.merge(options, {
|
||||
title: {
|
||||
text: 'fill: ' + boundary,
|
||||
display: true
|
||||
}
|
||||
plugins: {
|
||||
title: {
|
||||
text: 'fill: ' + boundary,
|
||||
display: true
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: true
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
@ -57,6 +58,7 @@
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: true
|
||||
}, {
|
||||
label: 'My Third dataset',
|
||||
borderColor: window.chartColors.green,
|
||||
@ -70,6 +72,7 @@
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: true
|
||||
}, {
|
||||
label: 'My Fourth dataset',
|
||||
borderColor: window.chartColors.yellow,
|
||||
@ -83,6 +86,7 @@
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
plugin: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Bar Chart - Stacked'
|
||||
|
||||
@ -66,9 +66,11 @@
|
||||
mode: 'index'
|
||||
},
|
||||
stacked: false,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Multi Axis'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Multi Axis'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
|
||||
@ -45,9 +45,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: details.label,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: details.label,
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
labels: {
|
||||
generateLabels: function(chart) {
|
||||
// Get the default label list
|
||||
var original = Chart.defaults.controllers.pie.legend.labels.generateLabels;
|
||||
var original = Chart.defaults.controllers.pie.plugins.legend.labels.generateLabels;
|
||||
var labels = original.call(this, chart);
|
||||
|
||||
// Build an array of colors used in the datasets of the chart
|
||||
|
||||
@ -74,9 +74,11 @@
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Radar Chart - Skip Points'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Radar Chart - Skip Points'
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
|
||||
@ -52,10 +52,12 @@
|
||||
type: 'scatter',
|
||||
data: scatterChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart'
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -92,9 +92,11 @@
|
||||
intersect: true,
|
||||
mode: 'nearest'
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart - Multi Axis'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart - Multi Axis'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="samples.js"></script>
|
||||
<script src="../dist/chart.min.js"></script>
|
||||
<script src="utils.js"></script>
|
||||
<title>Chart.js samples</title>
|
||||
</head>
|
||||
|
||||
@ -91,6 +91,9 @@
|
||||
}, {
|
||||
title: 'Radar',
|
||||
path: 'charts/radar.html'
|
||||
}, {
|
||||
title: 'Radar skip points',
|
||||
path: 'charts/radar-skip-points.html'
|
||||
}, {
|
||||
title: 'Combo bar/line',
|
||||
path: 'charts/combo-bar-line.html'
|
||||
|
||||
@ -61,10 +61,13 @@
|
||||
data: scatterChartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: title
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title
|
||||
}
|
||||
},
|
||||
|
||||
scales: {
|
||||
x: {
|
||||
position: xPosition,
|
||||
|
||||
@ -59,9 +59,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - X-Axis Filter'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - X-Axis Filter'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -50,9 +50,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: title
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -39,9 +39,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Grid Line Settings'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Grid Line Settings'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
|
||||
@ -39,9 +39,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Grid Line Settings'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Grid Line Settings'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
|
||||
@ -39,9 +39,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Min and Max Settings'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Min and Max Settings'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
|
||||
@ -60,9 +60,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Logarithmic'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Logarithmic'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -128,9 +128,11 @@
|
||||
type: 'scatter',
|
||||
data: scatterChartData,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -69,10 +69,12 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart with Multiline Labels'
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart with Multiline Labels'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -34,9 +34,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart with Non Numeric Y Axis'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart with Non Numeric Y Axis'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -72,8 +72,11 @@
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
text: 'Chart.js Combo Time Scale'
|
||||
plugins: {
|
||||
title: {
|
||||
text: 'Chart.js Combo Time Scale',
|
||||
display: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -79,9 +79,11 @@
|
||||
options: {
|
||||
spanGaps: 1000 * 60 * 60 * 24 * 2, // 2 days
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Time - spanGaps: 172800000 (2 days in ms)'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Time - spanGaps: 172800000 (2 days in ms)'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -78,9 +78,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Time Point Data'
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Time Point Data'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -100,8 +100,11 @@
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
text: 'Chart.js Time Scale'
|
||||
plugins: {
|
||||
title: {
|
||||
text: 'Chart.js Time Scale',
|
||||
display: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
@ -62,9 +62,11 @@
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - ' + type
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - ' + type
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user