Develop Reference

Change color of range column chart in ApexCharts

I am trying to implement a waterfall chart for 1 of my projects using ApexCharts. This chart isn't available out of the box with ApexCharts. So, I'm trying to modify the range column chart into a Waterfall chart.
This is pretty much all I need but I need to change the color of the columns where the range is decreasing. Here the middle columns have a blue color, but I need to change it to red. Any leads are appreciated.
I have already checked the fill and the colors property, they don't seem to work properly with range column charts.
CodePen: https://codesandbox.io/s/apx-range-column-forked-8dv67
Thanks in advance.

The closest thing I've been able to get working is setting a fillColor for each data point in a series:
this.chartOptions = {
series: [
{
name: "blue",
data: [
{
x: "Team A",
y: [0, 100],
fillColor: "#FF0000",
},
],
},
],
}
For this to work though, you'd need to do some pre-processing before you add the data points to the series. You would need a function to check if the range is negative and if so sets the color to red.
function barColor(dataPoint1, dataPoint2) {
return (dataPoint1 - dataPoint2) < 0 ? "" : "#FF0000";
}
There's a code Sandbox showing the fillColor in use.

Highcharts bubble chart with updating default colors

The Highcharts library has a default array of colors:
http://api.highcharts.com/highcharts/colors
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
which at "initialization" can be set to whatever you want.
My question: "after initialization", how to update the color array and "redraw" the chart?
For a single series, I found I can update the color with some sophistication ...
chart.series[0].update({
color: {
radialGradient: { cx: .5, cy: .6, r: .25 },
stops: [
[0, '#ffffff'],
[1, '#73ff96']
]
}
}, true);
But the bubble chart has a "default" border and "fill" that I can't seem to duplicate.
http://www.highcharts.com/docs/chart-design-and-style/colors
So the fundamental question may be: what is the default fill/opacity setup that bubble charts using internally with the "colors" array to build a specific series "color" attribute? And what is the "color" attribute?
update
Clarification follows: Based on the #morganfree answer. Applied to a single point, the series information was right on.
Below, the // unselect reverts back to the correct color, but when applied to a single point the color goes gray, with params, not to this red "highlight"
// unselect points
var points = chart.getSelectedPoints();
if (points.length > 0) {
Highcharts.each(points, function (point) {
point.select(false);
point.update({color: '#7cb5ec'}); // default color
});
}
// select current point
if(idx != -1)
{
chart.series[0].data[idx].select(true);
chart.series[0].data[idx].update({color: '#f45b5b'},true); // highlight color
}
http://fiddle.jshell.net/mshaffer/h39e2z0o/
Note the select element goes gray, based, I believe on the default parameters within
plotOptions: {
series: {
allowPointSelect: true
},
for the "marker"
http://api.highcharts.com/highcharts/plotOptions.series.marker
Does the "marker" allow for such dynamic recoloring?
Also note, if I randomize an element, then change the series color, the "randomized" element within the series does not change back to the correct color.
update 2
It appears the events for "bubble" and "series" within plotOptions are conflicting? click vs select?

If you want to change colors of the series after initialisation, then you have to loop through the series and update its color - the default 'feel' of the color will be preserved.
chart.series.forEach(function (series, i) {
series.update({
color: colors[colors.length - i - 1]
}, false, false);
});
chart.redraw();
example: http://fiddle.jshell.net/mp27yb75/2/
The color for a specific bubble is inherited from the series color but if you specify the color for the point, the default 'feel', again, will be preserved.
chart.series[0].data[0].update({
color: '#f45b5b'
});
example: http://fiddle.jshell.net/mp27yb75/3/
For a bubble, fill's opacity is set to 0.5, stroke's opacity is 1, stroke and fill colors are the same.

You can do this way,
chart.series[0].data[0].update({
y: 150,
marker: {
fillColor: 'red',
states: {
hover: {
fillColor: 'red',
lineColor: 'red'
}
}
}
});
DEMO

Highcharts Donut Chart customization

I'm working with highcharts and aiming to make a chart similar to this:
Now I've been playing around with the whole ordeal for a while now and I've come been able to reach the following point: http://jsfiddle.net/ccjSy/24/
$(function () {
$(document).ready(function () {
var chart = null;
var categories = ['Body Fat', 'Lean Mass'],
name = 'Body Fat vs. Lean Mass',
data = [{
y: 69,
color: '#F0CE0C',
drilldown: {
name: 'Body Fat',
color: '#F0CE0C'
}
}, {
y: 207,
color: '#23A303',
drilldown: {
name: 'Lean Mass' ,
color: '#23A303'
}
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'donutchart',
type: 'pie',
spacingTop: 0
},
title: {
text: 'Your Body Fat vs Lean Mass',
style: {"color": '#7d7d7d'}
},
series: [{
name: 'Weight',
data: browserData,
dataLabels: {
style: {
fontFamily: 'ArialMT',
fontSize: '15px',
fontWeight: 'bold',
color: '#7d7d7d'
}
},
innerSize: '70%'
}],
tooltip: {
valueSuffix: ' lbs'
},
plotOptions: {
series: {
cursor: 'pointer'
}
}
});
});
});
I am thinking of leaving the space empty in the donut chart and inserting a custom circle with the Weight labeling.
However, I'm not certain how to tackle the following problems:
1) Leave more defined white spaces in between my two columns
2) How to properly align my two data labels? (As you can see in the model, they are in a straight line with neutral lines attached)
3) How to display the data underneath the two labels with both, the pounds and the percentage, as shown in the image.

Answering each of your three questions:
"More white space between columns?" -- add a plotOptions.pie.borderWidth element. The default value is 1. I used 5 to give it more white space.
"Properly align the two data labels?" -- You can compute a custom startAngle based on the two data values which will give you the correct angle to start with. Since you only have two data values in the series, that's easy.
Calculate startAngle for pie chart
var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y))));
Notice that if you change the y value for the first data object, the "Body Fat" portion of the pie chart will still maintain it's correct position, even as the portion of the chart grows larger or smaller.
"Display data underneath the two labels with custom formatting?" -- use plotOptions.pie.format to apply custom formatting to the pie value labels.
format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>'
Here's a working JSFiddle to see the results. You'll still need to add a dark gray circle behind the pie chart and add the "Total Weight" text but that shouldn't be too difficult.
Since I'm sure you'll be wondering about this, I should mention that there's a lot of white space under the pie chart title because it's leaving enough room for other labels that may appear above or below the pie. Since you're only using two values that will always be on the left/right sides of the pie chart, that doesn't change the fact that HighCharts is preparing to have other labels that may need to be displayed in the surrounding area.

In Highcharts, are we able to make the border of a pyramid in 'dashed' style?

I'm wondering if we could make a dashed border for a pyramid chart.
Dashed border isn't native supported by Highcharts, but for column/bar chart, I've found a simple extension to make it happen:
Highcharts.seriesTypes.column.prototype.pointAttrToOptions.dashstyle = 'dashStyle';
But for a pyramid chart, I can't find a similar way to do that.
Is there any way we could make the border of a pyramid 'dashed'?
Here is a fiddle:
http://jsfiddle.net/scottszb1987/18009rf1/6/

In the chart.load event, you can loop over each point, call attr() on graphic element and apply the dashStyle param.
events:{
load:function() {
var chart = this,
series = chart.series[0],
each = Highcharts.each;
each(series.data, function(p, d) {
p.graphic.attr({
dashstyle: 'Dash'
});
});
}
}
Example:
http://jsfiddle.net/0p62up21/
DashStyles:
'Solid',
'ShortDash',
'ShortDot',
'ShortDashDot',
'ShortDashDotDot',
'Dot',
'Dash',
'LongDash',
'DashDot',
'LongDashDot',
'LongDashDotDot'
http://jsfiddle.net/xccct7k7/

Highcharts dynamically add/change yAxis plotLines

I'm trying to make it possible for my users to add a max plotLine to a chart and have it change the background color of the chart if a plot goes above that line. I can't seem to get a method to update the plotlines. I've tried:
chart.yAxis[0].update({
plotLines: [{
id: 'limit-max',
color: 'blue',
dashStyle: 'LongDashDot',
width: 1,
value: 45000,
zIndex: 0
}]
});
but I get the error:
TypeError: a is undefined
...dBands,function(a){a.render()});n(this.series,function(a){a.isDirty=!0})},setCat...
highcharts.js (line 136)

You can only destroy and create new plotLins, because update() function is not available.

just add this code and then you can use the plotline.update method
//Add support for update method
Highcharts.PlotLineOrBand.prototype.update = function (newOptions){
var plotBand = this;
Highcharts.extend(plotBand.options, newOptions);
if (plotBand.svgElem) {
plotBand.svgElem.destroy();
plotBand.svgElem = undefined;
plotBand.render();
}
}

Here's what worked for me http://jsfiddle.net/tx1kt0bj/2/
var plotBand = tempAxis.plotLinesAndBands[0];
$.extend(plotBand.options, {
color: '#000',
to: 10,
from: 2
});
plotBand.svgElem.destroy();
plotBand.svgElem = undefined;
plotBand.render();

I tried to assign an id to plotLine,
First remove the plotline completely by removePlotLine(id), then added it back by addPlotLine. It works great for me.
function upgradePlotLine(new_line) {
chart.yAxis[0].removePlotLine('my_line');
chart.yAxis[0].addPlotLine(new_line);
}