Develop Reference

Setting background color of rangeSelector container in Highstock/Highcharts

I have a Highcharts chart and I need to modify the rangeSelector section. I've been able to format some of the buttons and input boxes, but I'd like to specify the background color of the entire range selection area. Here's an image of the area I'm talking about (red outline).
Additionally, here's a JSFiddle for that particular chart.
As far as I can tell, there are no options that would allow me to select that section directly listed in the documentation.
I've also tried making a div and positioning it absolutely over the range selector, and then elevating the elements inside the range selector with the Highcharts zIndex attribute, but that doesn't appear to work.

You can use Highcharts.SVGRenderer class to render a rect element, which will be a background for the rangeSelector:
chart: {
events: {
load: function() {
var rangSel = this.rangeSelector.group.getBBox();
this.renderer.rect(
rangSel.x,
rangSel.y,
rangSel.width,
rangSel.height
).attr({
fill: 'red'
}).add();
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/kpbxya8s/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

Found a good workaround in case anyone runs into this issue as well. Set the chart's overall backgroundColor to a linear gradient with three stops (the first two are your initial color). Here's an example where the top bar needs to be 54px tall.
backgroundColor: {
linearGradient: [0, 0, 0, 54, 0, 54],
stops: [
[0, '#707070'],
[1, '#707070'],
[2, '#e2e2e2']
]
},

Heatmap.js Just want a red blob not multiple colours on the datapoint

I have created a heatmap and I just want my data point to be one colour instead of multiple colors like the standard one is, I'm not sure how to change the configuration of all the data points to do this.
I basically just want the colour in the middle to be the colour of the entire circle.
https://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html
On that website you will see an example of a heatmap and the data points all have blue bits around the outside I literally just want to make my points so they are just the colour in the middle of the data point.
For example the point in Florida I just want that entire circle to be red because it is red in the middle, instead of having the blue/yellow/green bits.

You just need to define the gradient in the heatmap and also set the blur value to cero:
For example:
var config = {
container: document.querySelector('.heatmap'),
blur: 0,
gradient: {
'1': 'red',
'0': 'white',
},
};
var heatmapInstance = h337.create(config);

Place icon/text on a rotating image

Hi I am using jQuery reel to display a 3D view of a site in London on my website.
This is the example.
Now I want to add some dynamic icons and text on 5 exact locations. I can place icons on one image like this but how can I do it for all the images so that the overlay icons and text move along with the background site images. These are about 40 images.
Can anyone please help.
Thanks

There isn't an automatic way to do it. The animation is based on a series of images which aren't necessarily related in a specific way.
First, You would need to map the coordinates or each of the individual images.
Second, you would need to capture the event of switching the image and move the icons accordingly. I haven't seen the plugin supporting this, though I might be mistaken.
They do it in one example, but it looks like they're using a single image there.

I have done it with annotations.
It is in the documentation.
$('#reel-image')
.reel({
images: 'sitePlans/<%=siteID%>/###.png',
frames: 20,
speed: 0,
annotations: {
'test':
{
x: [286,350,400,450,500,550,600,650,700,750,800,850,900,950],
y: [187,150,100,150,100,150,100,150,100,150,100,150,100,150],
link:
{
text: 'This is test text', target: '_blank',
href:'#'
}
}
}
});

Setting the background color of a Dojo gauge

I'm creating some Dojo 1.8 GlossySemiCircularGauge at runtime via javascript and I'm trying to set the background color of the gauge. I'm looking to set the color outside the gauge, not the gauge it self. I'm creating the gauge with syntax like this:
glossyCircular = new dojox.gauges.GlossySemiCircularGauge({
textIndicatorColor: '#FFFFFF',
background: "[0, 255, 0, 0]",
id: NewID,
Max: 20,
value: newValue,
noChange: "true",
width: wid,
textIndicatorPrecision: "2",
color: '#101030',
height: hei
}, dojo.byId(NewID));
Since the gauge is drawn with SVG, it doesn't work to set the background color of the container div. Is there a way around this?

The correct format for background is:
background: { color: "rgba(0,0,0,0)"}
Set the alpha channel to zero, so it will get transparent and you can adjust the background color via parent <div>.
See and play with a working example at jsFiddle: http://jsfiddle.net/phusick/E9YNM/
EDIT: I added dojo/domReady! to the example, so now it works not only in my browser.
EDIT2: background: [0,0,0,0] works as well, so just get rid of those quotation marks to have array instead of a string.

set background color in chart

I am using a theme, but i want to set background color around the chart to white or transparent or something.
I am trying this code:
var myTheme = dojox.charting.themes.PlotKit.orange;
myTheme.fill= "white";
chart10.setTheme(myTheme);
chart10.addPlot("default", {
type: "Pie",
labelOffset: -30,
radius: 150,
startAngle: 45,
font: "normal normal 10pt Tahoma",
fontColor: "black",
labelWiring: "grey",
labelStyle: "columns",
htmlLabels: true,
plotarea: { fill: "#000" }
});
But this code didn't works, none alteration is visible.
How can i set the color background ?

I believe you have to set both the chart.fill and plotarea.fill properties.
myTheme.chart.fill= "white";
myTheme.plotarea.fill = "white";
If you do console.debug(myTheme) you can inspect all the properties of the theme object. I usually have to experiment a little before I find the right ones.

I know this is old, but I had a situation where I was creating a pie chart and needed to change the background color behind the pie chart. I tried this solution, but it didn't work because I wasn't assigning a theme. I am creating it this way:
var pieChart = new Chart("myDIV");
pieChart.addPlot("default", {type: "Pie"});
pieChart.addSeries("Series A", pieString);
My pieString is where I am combining my variables together to form the pie. Basically, I concatenate a series of statements like this:
{y:200, tooltip: "layer", color:"red", text: "myText"}
I join those strings together and assign it to my pieString variable.
When I set up my chart, I got a standard white background behind it, which doesn't work well for my colored background since I wanted it to blend. There are two rectangles that make up the background. You can change the larger and furthest back one through pieChart.fill = "something", but the inner one didn't change.
The way I solved this for me is like this.
function ClearChartBackground() {
var sumDivRects = document.getElementById("chartDIV").getElementsByTagName("svg")[0].getElementsByTagName("rect"); //so I am getting the rectangles that are part of my chart div
var firstRect = sumDivRects[0];
var secondRect = sumDivRects[1];
firstRect.attributes.item(1).value = "0";
secondRect.attributes.item(1).value = "0";
//this drills down to the 'fill-opacity' attribute that can then be changed to make it transparent
}
As you can see in my photo, the original background was white, which doesn't work well on my gray background. After running my function, it is changed to transparent.
I am posting this because it took me a pretty long time to find out how to change this since I am having Dojo render it for me. I came across this post, but I didn't get much help from it since I wasn't doing a theme.

dojox.charting.themes.Claro.chart.fill = "#F1F1F0"
dojox.charting.themes.Claro.plotarea.fill = "#F1F1F0"
dojox.charting.themes.Claro.chart.stroke = "#F1F1F0"
// Set the theme
chart.setTheme(dojox.charting.themes.Claro);

Using Jquery, you can do something like this:
$("#chartNode svg rect:eq(0)").attr("fill", "0");
$("#chartNode svg rect:eq(0)").attr("fill-opacity", "0");
So, basically you are accessing the element and changing the attribute manually. It is not very efficient way to do with, but it will do the trick.