I am using CorinTech's "Flies Thru the Air" software to monitor some wireless temperature data loggers. The data chart package they use is by HighCharts.
I would like to be able to change the background color of the chart from BLACK to WHITE as sometimes I have to print the chart in color and all of the black makes the paper soggy AND burns through ink needlessly.
Is there a way to change this ?
THanks, Steve
Yes, this is possible. See backgroundColor.
...
chart: {
backgroundColor: '#FCFFC5'
},
...
You would need access to the code page that is rendering the charts to modify the value this software is using. By default the color is white but this software has created a theme of some sort. So, to make it white you just delete the backgroundColor property.
Related
We are using the packed bubble chart but we are using the size AND color to represent the same data dimension (e.g. money each person has)
Functionally, the color is on a gradient from low to high. And now we would like to add in a legend kindof like what you have on a heat map (https://www.highcharts.com/demo/heatmap) where you can see the low color/value with a gradient to the high color/value. Your demo on the heatmap even has a sympathetic highlight between the cell and the legend... that would be cool to bring over. Hell, it would be super cool to even use the legend to filter or refine the circles!
Anyway. The core of the quesiton is, how can we bring that heatmap style legend into the packed bubble chart? Not the bubble size, but representing the color
You need to use color axis. It is a separate module, but it is also build-in in heatmap and map.
Highcharts.chart('container', {
colorAxis: {
...
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/smo3nfzj/
API Reference: https://api.highcharts.com/highcharts/colorAxis
I want to change the color showed on the left of the stock name in the candlestick chart , BUT when edit color: in the series, it also changes the color of my candlestick chart, I want to have different color for every stock but to keep the same color in the chart. Any possible ways of doing this?
I'd like to use $mdThemingProvider to universally configure all buttons on my site with a custom palette. I can manipulate the buttons' background color by configuring A200 and A700 in the palette. I would also like to change the default text color. I've jiggered with contrastDefaultColor, contrastLightColors, and contrastDarkColors but the best I've been able to do is get black or white text.
The following snippit will produce white buttons with dark text:
var lightGrey = $mdThemingProvider.extendPalette('grey', {
'A200': '#fefefe', // Element background color (default)
'A700': '#fefefe', // Element hover background color (default)
'contrastDefaultColor': 'dark',
'contrastLightColors': '600 700 800 900'
});
$mdThemingProvider.definePalette('light-grey', lightGrey);
$mdThemingProvider.theme('default')
// Accent palette controls buttons, links, etc
.accentPalette('light-grey');
Changing contrastDefaultColor to "light" causes the text to turn white.
I could manually achieve the effect I want by overriding the generated stylesheet's rules:
.md-button.md-default-theme.md-fab {
color: #bdc3c7;
}
...but I'm trying to use the tools provided in the library.
I don't know why you are facing this problem but by giving A200 & A700 the color you want to give will solve the problem. like this:
var lightGrey = $mdThemingProvider.extendPalette('grey', {
'A200': '#bdc3c7', // Element background color (default)
'A700': '#bdc3c7', // Element hover background color (default)
'contrastDefaultColor': 'dark',
'contrastLightColors': ['600', '700', '800', '900']
});
Note: Try to give contrast palette in array form.
And if you are facing some different problem please update or you can refer this link
looking for high chart sample program, I haven't used Highcharts before, but it seems there are no sliders built take a look at the answer.
Actually Highcharts in general are not free.. For me it's simple bullet graph. In Highcharts for that you can use bar chart with scatter point
The bullet concept will work for this, though it will take some work to get styling like that. There are plenty of useful options for styling such a chart though without relying on the physical gauge metaphor.
A quick variation on the bullet chart approach that puts them into a single chart and removes the banding:
http://jsfiddle.net/jlbriggs/kwtZr/41/
It relies on a custom extension to produce the 'line' marker type:
Highcharts.Renderer.prototype.symbols.line = ...
{{
edit in response to comments below:
updated example with some additional formatting options and clean up:
http://jsfiddle.net/jlbriggs/kwtZr/55/
be wary of using multiple colors unless the colors truly mean something.
Using additional color to highlight items that require attention is a good use of color.
Using color to highlight every possible status of something (shades of green, fading to shades of yellow, fading to shades of red...), is a bad use of color that is sadly over used and even expected by some.
FWIW
Also important to reiterate that the purpose of this type of display is very well handled by a bullet chart, which is definitely worth looking into migrating to somewhere along the way. Reference:
http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf
http://en.wikipedia.org/wiki/Bullet_graph
While using a demo highchart (from highcharts.com). To be more specific a basic bar chart, a grey theme.
As in this one http://www.highcharts.com/demo/bar-basic/gray
The bars on the graph in grey theme have a white line around them that I want to remove. I found in the javascript that it is strokewith=1 that make them appear. I can't find a way to set it to 0 since it is in the library from highcharts. How can i access strokewith=1 locally ?
best regards from Iceland :)
This is handled with the borderWidth property. I recommend checking out the documentation on the API. Set borderWidth: 0 to get your result.