diff --git a/packages/core/demo/demo-data/line.ts b/packages/core/demo/demo-data/line.ts
index 9196cdaafc..cb4f5fa09c 100644
--- a/packages/core/demo/demo-data/line.ts
+++ b/packages/core/demo/demo-data/line.ts
@@ -124,17 +124,17 @@ export const lineTimeSeriesOptions = {
export const lineTimeSeriesWithCustomStroke = {
...lineTimeSeriesOptions,
title: "Line (custom stroke, fill colors)",
- getStrokeColor: (datasetLabel, label, value, datum, originalStrokeColor)=>{
+ getStrokeColor: (datasetLabel, label, data, originalStrokeColor)=>{
console.log(`originalStrokeColor: ${originalStrokeColor}`);
- return value > 60000 ? '#FF0000' : originalStrokeColor;
+ return data && data.value > 60000 ? '#FF0000' : originalStrokeColor;
},
- getFillColor: (datasetLabel, label, value, datum, originalFillColor)=>{
+ getFillColor: (datasetLabel, label, data, originalFillColor)=>{
console.log(`originalFillColor: ${originalFillColor}`);
- return value > 60000 ? '#FF0000' : originalFillColor;
+ return data && data.value > 60000 ? '#FF0000' : originalFillColor;
},
- getIsFilled: (datasetLabel, label, value, datum, originalIsFilled)=>{
+ getIsFilled: (datasetLabel, label, data, originalIsFilled)=>{
console.log(`originalIsFilled: ${originalIsFilled}`);
- return value > 60000 ? true : originalIsFilled;
+ return data && data.value > 60000 ? true : originalIsFilled;
}
};
diff --git a/packages/core/src/components/essentials/tooltip-bar.ts b/packages/core/src/components/essentials/tooltip-bar.ts
index afe8e968b9..25db8b0908 100644
--- a/packages/core/src/components/essentials/tooltip-bar.ts
+++ b/packages/core/src/components/essentials/tooltip-bar.ts
@@ -37,7 +37,7 @@ export class TooltipBar extends Tooltip {
if (e.detail.multidata) {
// multi tooltip
data = e.detail.multidata;
- defaultHTML = this.getMultilineTooltipHTML(e.detail.multidata);
+ defaultHTML = this.getMultilineTooltipHTML(data);
} else {
defaultHTML = this.getTooltipHTML(e.detail.hoveredElement.datum());
}
@@ -143,7 +143,8 @@ export class TooltipBar extends Tooltip {
const formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
this.model.getOptions().tooltip.valueFormatter(datapoint.value) : datapoint.value.toLocaleString("en");
- const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label, datapoint.value, datapoint);
+ // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
+ const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);
return `
diff --git a/packages/core/src/components/essentials/tooltip.ts b/packages/core/src/components/essentials/tooltip.ts
index 4fc26b53b1..e3b22cbe46 100644
--- a/packages/core/src/components/essentials/tooltip.ts
+++ b/packages/core/src/components/essentials/tooltip.ts
@@ -132,7 +132,8 @@ export class Tooltip extends Component {
const formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
this.model.getOptions().tooltip.valueFormatter(datapointValue) : datapointValue.toLocaleString("en");
- const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel);
+ // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
+ const indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);
return `
diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts
index 2dfd2418bf..7a8da6f596 100644
--- a/packages/core/src/components/graphs/scatter.ts
+++ b/packages/core/src/components/graphs/scatter.ts
@@ -55,19 +55,19 @@ export class Scatter extends Component {
dotsEnter.merge(dots)
.raise()
.classed("dot", true)
- .classed("filled", d => this.model.getIsFilled(d.datasetLabel, d.label, d.value, d, filled))
- .classed("unfilled", d => !this.model.getIsFilled(d.datasetLabel, d.label, d.value, d, filled))
+ .classed("filled", d => this.model.getIsFilled(d.datasetLabel, d.label, d, filled))
+ .classed("unfilled", d => !this.model.getIsFilled(d.datasetLabel, d.label, d, filled))
.attr("cx", (d, i) => this.services.axes.getXValue(d, i))
.transition(this.services.transitions.getTransition("scatter-update-enter", animate))
.attr("cy", (d, i) => this.services.axes.getYValue(d, i))
.attr("r", options.points.radius)
.attr("fill", d => {
- if (this.model.getIsFilled(d.datasetLabel, d.label, d.value, d, filled)) {
- return this.model.getFillColor(d.datasetLabel, d.label, d.value, d);
+ if (this.model.getIsFilled(d.datasetLabel, d.label, d, filled)) {
+ return this.model.getFillColor(d.datasetLabel, d.label, d);
}
})
.attr("fill-opacity", filled ? 0.2 : 1)
- .attr("stroke", d => this.model.getStrokeColor(d.datasetLabel, d.label, d.value))
+ .attr("stroke", d => this.model.getStrokeColor(d.datasetLabel, d.label, d))
.attr("opacity", 1)
// a11y
.attr("role", Roles.GRAPHICS_SYMBOL)
@@ -112,7 +112,7 @@ export class Scatter extends Component {
const hoveredElement = select(this);
hoveredElement.classed("hovered", true);
- hoveredElement.style("fill", (d: any) => self.model.getFillColor(d.datasetLabel, d.label, d.value, d));
+ hoveredElement.style("fill", (d: any) => self.model.getFillColor(d.datasetLabel, d.label, d));
const eventNameToDispatch = d3Event.type === "mouseover" ? Events.Scatter.SCATTER_MOUSEOVER : Events.Scatter.SCATTER_MOUSEMOVE;
// Dispatch mouse event
diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
index af8ef30d7c..de9c7e72b3 100644
--- a/packages/core/src/model.ts
+++ b/packages/core/src/model.ts
@@ -193,30 +193,30 @@ export class ChartModel {
* @param value
* @param defaultFilled the default for this chart
*/
- getIsFilled(datasetLabel: any, label?: any, value?: any, data?: any, defaultFilled?: boolean) {
+ getIsFilled(datasetLabel: any, label?: any, data?: any, defaultFilled?: boolean) {
const options = this.getOptions();
if (options.getIsFilled) {
- return options.getIsFilled(datasetLabel, label, value, data, defaultFilled);
+ return options.getIsFilled(datasetLabel, label, data, defaultFilled);
} else {
return defaultFilled;
}
}
- getFillColor(datasetLabel: any, label?: any, value?: any, data?: any) {
+ getFillColor(datasetLabel: any, label?: any, data?: any) {
const options = this.getOptions();
const defaultFillColor = this.getFillScale()[datasetLabel](label);
if (options.getFillColor) {
- return options.getFillColor(datasetLabel, label, value, data, defaultFillColor);
+ return options.getFillColor(datasetLabel, label, data, defaultFillColor);
} else {
return defaultFillColor;
}
}
- getStrokeColor(datasetLabel: any, label?: any, value?: any, data?: any) {
+ getStrokeColor(datasetLabel: any, label?: any, data?: any) {
const options = this.getOptions();
const defaultStrokeColor = this.colorScale[datasetLabel](label);
if (options.getStrokeColor) {
- return options.getStrokeColor(datasetLabel, label, value, data, defaultStrokeColor);
+ return options.getStrokeColor(datasetLabel, label, data, defaultStrokeColor);
} else {
return defaultStrokeColor;
}