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.

How do I set a bar chart to default to a suggested maximum in chart.js v1.01?

I'm using Chart.js v1.0.1-beta.3. I'm creating an interactive bar chart where users can click on a bar to increase the value of that bar.
By default, the histogram begins with empty values. The y-axis in that case defaults to a [0,1] scale. When users start adding data to the histogram, the y-axis maximum changes to adjust, which causes a jarring shift in the appearance of the graph at low values.
I'd like to have the y-axis default to, say, a [0,10] scale even when no data is entered. This StackOverflow question is the most relevant info I can find on how to address problems like this; the best solution on that page is to use the 'suggestedMax' parameter in the chart options:
scales: {
yAxes: [{
ticks: {
suggestedMax : 10
}
}]
},
although this might apply only to v2+ of the library, it's hard to tell. In any event, this doesn't work, and the y-axis defaults to [1,0] when there's no data. I've also tried every combination of every other suggestion on that page, including
using scaleOverride : true, display : true, setting explicit min and max parameters within 'ticks', scaleBeginsAtZero : true, beginAtZero : true, and scaleStartValue : 0,
If I try to upgrade to the most current release, v2.7.3, the charts don't appear on the rendered page at all. I don't have the time or inclination to debug what's happening there, so I'm stuck with v1.0.1.
How do I have a bar chart default to a suggested maximum in this version? Is it even possible?

Looking through the documentation included with v1.0.1 (zip file), there doesn't appear to be a way to do this. I can't see any option to set the scale values.
In v2.7.3 this is quite simple. A working example is below. The chart starts empty, with a y-axis scale from 0-10. Clicking 'Add Series' adds a new bar with a value of 5. Clicking a bar increments value by 1.
let btn1 = document.getElementById('add'),
canvas = document.getElementById('chart'),
chart = new Chart(canvas, {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
suggestedMax: 10
}
}]
}
}
});
canvas.addEventListener('click', function(e) {
let idx = chart.getDatasetAtEvent(e)[0]._datasetIndex;
chart.config.data.datasets[idx].data[0]++;
chart.update();
});
btn1.addEventListener('click', function() {
chart.config.data.datasets.push({
data: [5]
});
chart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="add">Add Series</button> Click a bar to increment its value by 1.
<canvas id="chart"></canvas>

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...

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);
}
});

JQPlot pie chart throwing "Unable to get value of the property '0': object is null or undefined" error

I'm using the JQuery based charting library jqPlot (and the pie chart plugin from it) to generate a very basic pie chart. It works fine in FF, etc. but (surprise!) not in IE. In IE it actually loads okay and looks fine, but once I roll my mouse over the chart it throws the following error:
Unable to get value of the property '0': object is null or undefined
The way I'm setting everything is very straightforward:
var optionsObj = {
seriesColors: ['#3399cc', '#cc6666', '#7ba550', '#ffcc66', '#d17314'],
grid: {
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: { lineLabels: true, lineLabelsLineColor: '#777'}
}
};
line1 = [['Coffee', 9],['Beer', 4],['TV', 6],['Lost umbrellas', 2],['Bicycle rides', 10]];
chart = $.jqplot('pieDiv', [line1], optionsObj);
I should also mention that I'm using the modified pie chart plugin that includes label lines, but I get this problem even when using the regular pie chart plugin. This can be found here: http://blog.statscollector.com/line-labels-for-the-pie-chart-in-jqplot/
Has anyone who has used this library before come across something like this?
Any help would be greatly appreciated.
Thanks.

Try this
var optionsObj = {
seriesColors: ['#3399cc', '#cc6666', '#7ba550'],
grid: {
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: { lineLabels: true, lineLabelsLineColor: '#777'}
}
};
line1 = [['Coffee', 9],['Beer', 4],['TV', 6],['Lost umbrellas', 2],['Bicycle rides', 10]];
chart = $.jqplot('pieDiv', line1, optionsObj);

Seems like you are missing series colors.Yo have 3 series colors while line 1 has 5 groups.