Skip to content

Commit

Permalink
allow single datapoint to have different color - fixes #467
Browse files Browse the repository at this point in the history
  • Loading branch information
@junedchhipa
junedchhipa committed Apr 8, 2019
1 parent 38c7b00 commit b42bcef
Show file tree
Hide file tree
Showing 13 changed files with 260 additions and 64 deletions.
104 changes: 104 additions & 0 deletions samples/vanilla-js/column/data-color.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Column - Grouped</title>


<link href="../../assets/styles.css" rel="stylesheet" />

<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>

<body>
<div id="chart">

</div>


<script src="../../../dist/apexcharts.js"></script>

<script>
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '60%'
},
},
stroke: {
show: true,
width: 2,
},
dataLabels: {
enabled: false
},
series: [{
name: 'Yearly Profit',
data: [{
x: '2011',
y: 1292
}, {
x: '2012',
y: 4432
}, {
x: '2013',
y: 5423
}, {
x: '2014',
y: 6653
}, {
x: '2015',
y: 8133,
fillColor: '#EB8C87',
strokeColor: '#C23829'
}, {
x: '2016',
y: 7132
}, {
x: '2017',
y: 7332
}, {
x: '2018',
y: 6553
}]
}],
yaxis: {
labels: {
formatter: function(val) {
return val / 1000 + 'K $'
}
}
},
fill: {
opacity: 1,
},
xaxis: {
type: 'datetime'
}
}

var chart = new ApexCharts(
document.querySelector("#chart"),
options
);

chart.render();


</script>
</body>

</html>
23 changes: 9 additions & 14 deletions samples/vanilla-js/column/histogram.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,20 @@
opacity: 1;
border: 0;
}

.selection {
opacity: 0;
}
</style>
</head>

<body>

<div id="chart">
<div id="timeline-chart"></div>
Selected: <span id="selected-count">0</span>
<div class="selection">
Selected: <span id="selected-count">0</span>
</div>
</div>


Expand Down Expand Up @@ -59,7 +65,6 @@
},
plotOptions: {
bar: {
distributed: true,
dataLabels: {
enabled: false
}
Expand All @@ -73,16 +78,6 @@
allowMultipleDataPointsSelection: true
}
},
markers: {
size: 5,
strokeColor: "#fff",
strokeWidth: 3,
strokeOpacity: 1,
fillOpacity: 1,
hover: {
size: 8
}
},
xaxis: {
categories: [10,20,30,40,50,60,70],
axisBorder: {
Expand Down Expand Up @@ -114,8 +109,8 @@


chart.addEventListener("dataPointSelection", function(e, opts) {
console.log(e, opts)
})
console.log(e, opts)
})



Expand Down
59 changes: 35 additions & 24 deletions src/charts/Bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ class Bar {
draw(series, seriesIndex) {
let w = this.w
let graphics = new Graphics(this.ctx)
let fill = new Fill(this.ctx)

const coreUtils = new CoreUtils(this.ctx, w)
this.series = coreUtils.getLogSeries(series)
Expand Down Expand Up @@ -190,23 +189,7 @@ class Bar {

yArrj.push(y)

let seriesNumber = this.barOptions.distributed ? j : i

let fillColor = null

if (this.barOptions.colors.ranges.length > 0) {
const colorRange = this.barOptions.colors.ranges
colorRange.map((range) => {
if (series[i][j] >= range.from && series[i][j] <= range.to) {
fillColor = range.color
}
})
}

let pathFill = fill.fillPath({
seriesNumber: this.barOptions.distributed ? seriesNumber : realIndex,
color: fillColor
})
let pathFill = this.getPathFillColor(i, j, realIndex)

elSeries = this.renderSeries({
realIndex,
Expand Down Expand Up @@ -238,6 +221,34 @@ class Bar {
return ret
}

getPathFillColor(i, j, realIndex) {
const w = this.w
let fill = new Fill(this.ctx)

let fillColor = null
let seriesNumber = this.barOptions.distributed ? j : i

if (this.barOptions.colors.ranges.length > 0) {
const colorRange = this.barOptions.colors.ranges
colorRange.map((range) => {
if (series[i][j] >= range.from && series[i][j] <= range.to) {
fillColor = range.color
}
})
}

if (w.config.series[i].data[j] && w.config.series[i].data[j].fillColor) {
fillColor = w.config.series[i].data[j].fillColor
}

let pathFill = fill.fillPath({
seriesNumber: this.barOptions.distributed ? seriesNumber : realIndex,
color: fillColor
})

return pathFill
}

renderSeries({
realIndex,
pathFill,
Expand Down Expand Up @@ -267,6 +278,10 @@ class Bar {
: w.globals.stroke.colors[realIndex]
}

if (w.config.series[i].data[j] && w.config.series[i].data[j].strokeColor) {
lineFill = w.config.series[i].data[j].strokeColor
}

if (this.isNullValue) {
pathFill = 'none'
}
Expand Down Expand Up @@ -507,8 +522,6 @@ class Bar {
pathTo +
graphics.line(endingShape.newX, barYPosition) +
endingShape.path +
// graphics.line(x, barYPosition) +
// graphics.line(x, barYPosition + barHeight - strokeWidth) +
graphics.line(zeroW, barYPosition + barHeight - strokeWidth) +
graphics.line(zeroW, barYPosition)

Expand Down Expand Up @@ -614,17 +627,15 @@ class Bar {
pathTo +
graphics.line(barXPosition, endingShape.newY) +
endingShape.path +
// graphics.line(barXPosition, y) +
// graphics.line(barXPosition + barWidth - strokeWidth, y) +
graphics.line(barXPosition + barWidth - strokeWidth, zeroH) +
graphics.line(barXPosition, zeroH)
graphics.line(barXPosition - strokeWidth / 2, zeroH)
pathFrom =
pathFrom +
graphics.line(barXPosition, zeroH) +
endingShape.ending_p_from +
graphics.line(barXPosition + barWidth - strokeWidth, zeroH) +
graphics.line(barXPosition + barWidth - strokeWidth, zeroH) +
graphics.line(barXPosition, zeroH)
graphics.line(barXPosition - strokeWidth / 2, zeroH)

if (!w.globals.isXNumeric) {
x = x + xDivision
Expand Down
22 changes: 3 additions & 19 deletions src/charts/BarStacked.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,23 +178,7 @@ class BarStacked extends Bar {
xArrValues.push(x)
yArrValues.push(y)

let seriesNumber = w.config.plotOptions.bar.distributed ? j : i

let fillColor = null

if (this.barOptions.colors.ranges.length > 0) {
const colorRange = this.barOptions.colors.ranges
colorRange.map((range, index) => {
if (series[i][j] >= range.from && series[i][j] <= range.to) {
fillColor = range.color
}
})
}

let pathFill = this.fill.fillPath({
seriesNumber: this.barOptions.distributed ? seriesNumber : realIndex,
color: fillColor
})
let pathFill = this.bar.getPathFillColor(i, j, realIndex)

elSeries = this.renderSeries({
realIndex,
Expand Down Expand Up @@ -530,14 +514,14 @@ class BarStacked extends Bar {
this.graphics.line(barXPosition, endingShape.newY) +
endingShape.path +
this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) +
this.graphics.line(barXPosition, barYPosition)
this.graphics.line(barXPosition - strokeWidth / 2, barYPosition)
pathFrom =
pathFrom +
this.graphics.line(barXPosition, barYPosition) +
this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) +
this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) +
this.graphics.line(barXPosition + barWidth - strokeWidth, barYPosition) +
this.graphics.line(barXPosition, barYPosition)
this.graphics.line(barXPosition - strokeWidth / 2, barYPosition)

if (
w.config.plotOptions.bar.colors.backgroundBarColors.length > 0 &&
Expand Down
15 changes: 13 additions & 2 deletions src/charts/Scatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,21 +100,33 @@ export default class Scatter {
drawPoint(x, y, radius, finishRadius, realIndex, dataPointIndex, j) {
const w = this.w

let i = realIndex
let anim = new Animations(this.ctx)
let filters = new Filters(this.ctx)
let fill = new Fill(this.ctx)
let markers = new Markers(this.ctx)
const graphics = new Graphics(this.ctx)

const markerConfig = markers.getMarkerConfig('apexcharts-marker', i)

let pathFillCircle = fill.fillPath({
seriesNumber: realIndex,
patternUnits: 'objectBoundingBox'
})
let circle = graphics.drawCircle(radius)

if (w.config.series[i].data[dataPointIndex]) {
if (w.config.series[i].data[dataPointIndex].fillColor) {
pathFillCircle = w.config.series[i].data[dataPointIndex].fillColor
}
}

circle.attr({
cx: x,
cy: y,
fill: pathFillCircle
fill: pathFillCircle,
stroke: markerConfig.pointStrokeColor,
strokeWidth: markerConfig.pWidth
})

if (w.config.chart.dropShadow.enabled) {
Expand Down Expand Up @@ -192,7 +204,6 @@ export default class Scatter {
'default-marker-size': finishRadius
})

const markers = new Markers(this.ctx)
filters.setSelectionFilter(circle, realIndex, dataPointIndex)
markers.addEvents(circle)

Expand Down
4 changes: 3 additions & 1 deletion src/modules/Core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ export default class Core {
} else {
this.twoDSeries.push(Utils.parseNumber(ser[i].data[j][1]))
}
gl.dataFormat2DArray = true
}
if (cnf.xaxis.type === 'datetime') {
// if timestamps are provided and xaxis type is datettime,
Expand Down Expand Up @@ -509,6 +510,7 @@ export default class Core {
// fix #368
activeI = this.activeSeriesIndex
}
gl.dataFormatXY = true

// get series
for (let j = 0; j < ser[i].data.length; j++) {
Expand Down Expand Up @@ -737,7 +739,7 @@ export default class Core {
// user didn't provided labels, fallback to 1-2-3-4-5
let labelArr = []
if (gl.axisCharts) {
if (this.twoDSeriesX.length > 0) {
if (gl.dataFormat2DArray) {
const scales = new Scales(this.ctx)
labelArr = scales
.linearScale(
Expand Down
Loading

6 comments on commit b42bcef

@smilexu
Copy link

@smilexu smilexu commented on b42bcef May 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@junedchhipa This change does not work for heatmap, could you also add this feature for heatmap ? Tested on 3.6.11, the latest version.

My real problem is that current color scale is linear, it does not work so good when values have big difference. So either it support other scale like pow scale or allow us to customize the color for each data point work for me, any suggestion ?

@junedchhipa
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll check again how it can be tweaked for heatmap charts too.

@smilexu
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thanks

@smilexu
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@junedchhipa just wonder if you fixed this feature for heatmap, did not find any info from document. thanks in advance.

@junedchhipa
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess, I missed this one.
Can you please create an issue so I can track it better?

@smilexu
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@junedchhipa I created a issue for this , #717 . Thank you very much.

Please sign in to comment.