diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
index b727d310124..b231b0ae6ea 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx
@@ -38,6 +38,7 @@ const propTypes = {
height: PropTypes.number.isRequired,
colorScheme: PropTypes.string,
normalized: PropTypes.bool,
+ cumulative: PropTypes.bool,
binCount: PropTypes.number,
opacity: PropTypes.number,
xAxisLabel: PropTypes.string,
@@ -49,6 +50,7 @@ const defaultProps = {
className: '',
colorScheme: '',
normalized: false,
+ cumulative: false,
opacity: 1,
xAxisLabel: '',
yAxisLabel: '',
@@ -64,6 +66,7 @@ class CustomHistogram extends React.PureComponent {
binCount,
colorScheme,
normalized,
+ cumulative,
opacity,
xAxisLabel,
yAxisLabel,
@@ -100,6 +103,7 @@ class CustomHistogram extends React.PureComponent {
height={parent.height}
ariaLabel="Histogram"
normalized={normalized}
+ cumulative={cumulative}
binCount={binCount}
binType="numeric"
margin={{ top: 20, right: 20 }}
@@ -116,6 +120,10 @@ class CustomHistogram extends React.PureComponent {
{t('cumulative')}
{datum.cumulative}
+
+ {t('percentile (exclusive)')}
+ {`{((datum.cumulativeDensity - datum.density) * 100).toPrecision(4)}th`}
+
)}
valueAccessor={datum => datum}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts
index bcb4dcc6720..0d74d19b42d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/controlPanel.ts
@@ -131,6 +131,18 @@ const config: ControlPanelConfig = {
},
},
],
+ [
+ {
+ name: 'cumulative',
+ config: {
+ type: 'CheckboxControl',
+ label: t('Cumulative'),
+ renderTrigger: true,
+ description: t('Whether to make the histogram cumulative'),
+ default: false,
+ },
+ },
+ ],
],
},
],
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js
index 7cd6856ac5b..4a5782c7172 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/transformProps.js
@@ -22,6 +22,7 @@ export default function transformProps(chartProps) {
colorScheme,
linkLength,
normalized,
+ cumulative,
globalOpacity,
xAxisLabel,
yAxisLabel,
@@ -35,6 +36,7 @@ export default function transformProps(chartProps) {
binCount: parseInt(linkLength, 10),
colorScheme,
normalized,
+ cumulative,
opacity: globalOpacity,
xAxisLabel,
yAxisLabel,