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.

SAP UI5 Gantt Chart color based on condition

How can I set the fill color of a Gantt chart shape based on the value of a property in the bound json model?
Here's the code I am using to configure the sap.gantt.config.Shape :-
var oRectangle = new sap.gantt.config.Shape({
key: "Rectangle",
shapeDataName: "schedule",
shapeClassName: "sap.gantt.shape.Rectangle",
shapeProperties: {
time: "{startTime}",
endTime: "{endTime}",
height: 32,
fill: "green",
title: "{name}",
level: 0
}
});
The use case I am trying to address is :-
If there are 4 or more schedules, then fill the shape with GREEN else fill YELLOW.
I have already tried expression binding like :
fill: "{= ${data>/schedule}.length > 4 ? 'green' : 'yellow' }"
But that didn't give any result and filled the shape with the default BLACK color.
Is there some other way of getting it possible?
Also, is there a way we can configure Gantt shapes in XML views itself ratherer than doing all these configurations the in controller?

delete the attribute from your shape definition.
Before you define the oRectangle, put the following code segment:
sap.ui.define(["sap/gantt/shape/Rectangle"], function (Rectangle) {
var shapeRectangle = Rectangle.extend("sap.test.shapeRectangle");
shapeRectangle.prototype.getFill = function (oRawData) {
return oRawData.color;
};
return shapeRectangle;
}, true);
After that, you have to provide the property color to the order in your data model on the same level as startTime, endTime, etc...

Kendo pie chart best fit labels

Is it possible to position the Kendo Pie Chart labels depending on whether there is enough room for them to fit inside the Pie Chart, just like the best fit option in Excel? So if they can fit they go inside and if they can't an arrow will point to them from the outside. Possibly similar to this: Kendo barchart category labels left and right based on value
I don't mind doing it manually if I have to because I don't think Kendo has the feature built in.

I just worked it out, it turns out kendo passes the current data item as a parameter to the position property if you set it to a function, so all I had to do was check it's percentage and if its less than 30% (or whatever you want) then it will be in the inside otherwise it will be on the outside. The same can be done with color.
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
align: "circle",
position: function(e) {
if(e.percentage < 0.1)
return "outsideEnd";
else
return "insideEnd";
},
color: function(e) {
if(e.percentage < 0.1)
return "#000";
else
return "#fff";
}
},
type: "pie",
data: [2,1,3,4,2, 5]
}]
});
http://dojo.telerik.com/ewIva/3

Incorrect data point value in highcharts navigator series when extending min and max date

I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?

Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});

programmatically get the color of a series from a Google Chart

I am creating a custom legend for a Google Chart which will display statistics for each series. I'm using a Google Table for this. As it is also the legend, I want the first column to have color markers which correspond to the colors in the chart. But I can't find anything in the Google Charts API which provides a means of asking a chart what colors are being used for each series.

The charts do not provide a means to get the color of a series, but you can assign your own colors (via the colors or series.<series index>.color options) and use them in your custom legend.
colors: ['#c038b1', '#5071c7', '#6a57b3']
or:
series: {
0: {
// set the options for the first series
color: '#c038b1'
},
1: {
// set the options for the second series
color: '#5071c7'
},
2: {
// set the options for the third series
color: '#6a57b3'
}
}
If you want to use the default colors, this is the list:
['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00', '#b82e2e', '#316395', '#994499', '#22aa99', '#aaaa11', '#6633cc', '#e67300', '#8b0707', '#651067', '#329262', '#5574a6', '#3b3eac', '#b77322', '#16d620', '#b91383', '#f4359e', '#9c5935', '#a9c413', '#2a778d', '#668d1c', '#bea413', '#0c5922', '#743411']

you have to use
className or cssClassNames or style
and apply what ever properties you need like color, font size etc
https://developers.google.com/chart/interactive/docs/gallery/table#Example
Example:
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'color:red; font-size:22px;'});