How to apply styles in Amchart-Stockchart - javascript

I am trying to apply various Styles in my own Amchart-Stockchart, one such can be viewed in https://codepen.io/Volabos/pen/xywPdb
However I failed to apply below 2 stylings :
I want to fill the area under line till the x-axis with light Alpha value. I found one option with fillAlpha, however I couldnt not be able to apply this option.
In the Zoom option, I want to apply different styles e.g. different background color for different zoom options, Fonts etc. I was wondering if I could warp them within various Divs and place them in other suitable spaces in the Webpage.
Is it possible to achieve them? Any pointer will be highly appreciated.

The property is called fillAlphas - you're missing the s at the end:
stockGraphs: [{
// ...
fillAlphas: .5
},
// ...
]
This is also the case setting the fill color - the property is fillColors with an s. You'll need to set useDataSetColors to false if you want to use a different color than the one specified in the dataSet.
You can't wrap the periodSelector zoom options in a div and move them around like you can with legends. You can style the the periodSelector components by setting addClassNames to true and apply the desired CSS to the elements associated with the period selector using the classes listed here. Note that you can position the periodSelector by setting its position property to "top", "left", "right" or "bottom".
Here's a demo illustrating fillAlphas and addClassNames.

Related

Adjust the saturation of a sunburst level - Highcharts

I created a sunburst chart with Highcharts. I would like a way to highlight a level, ideally by adjusting the color saturation, without affecting the color of proceeding levels.
What I've tried so far:
colorVariation(API docs)
my code example
Initially, this looked like what I needed, it adjusts the color brightness of a given level, either darkening or lightening it. Unfortunately, it only takes a to parameter, and no equivalent from, the purpose of colorVariation seems only to graduate the color from the parent color to the given brightness modifier value.
color(API docs)
my code example
color can be used to change the color of a given level, this doesn't quite meet the criteria of what I wanted as it changes each section on a level to the same color. It also causes the child levels to inherit the new color, as seen in the example. Setting colorByPoint doesn't fix this issue either as the child level will cycle through all colors rather than matching the colors set in the level 1 parent.
What I'm trying to achieve:
You can use internal Highcharts brighten method for brightening colors. Below, you can find an example of how to achieve the wanted result in your case:
chart: {
height: "600px",
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.id[0] === '1' || p.id[0] === '3') {
p.graphic.attr({
fill: Highcharts.color(p.color).brighten(0.3).get()
});
}
})
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/de3mp4tq/

In Highcharts, is it possible to add a border to the legend symbol?

In highcharts, to configure the legend symbol (the small square in front of each legend item), there are four properties can be configured:
symbolHeight, symbolPadding, symbolRadius, symbolWidth.
Is it possible to add some extra properties to it? Like borderWidth, borderColor...?
symbolHeight, symbolPadding, symbolRadius, and symbolWidth are merely used to adjust the size and placement of the symbols in the legend. To further change the appearance of these symbols, you should look at the options for series.marker.symbol instead (see http://api.highcharts.com/highcharts#series<line>.marker.symbol).
There's a demo fiddle the Highcharts team created that shows you a bunch of options for marker symbols, each of which shows up in the legend as well: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-symbol/
Hopefully, one of these options should be suitable for you.

How to set custom fill color in dygraph

By setting the property fillGraph: true , we can fill the dygraph with its default color. But how to fill it with a custom color?
The fill color is always the same as the series color (which you can control via the colors option) but with a lower opacity, controllable by the fillAlpha option.
If you need more flexibility than this, you have two options:
Create two series, one with fill and one without. You can use CSS to hide one from the legend. Demo here.
Create a custom plotter that uses the colors you want. Read more about how to do that here.

jqplot pie chart legend width

I'm trying to render the legend of a pie chart so that it has a fixed width, and when the labels reach that width (the div holder) to hyphenate on the next line. I tried the row option but it doesn't work very well because my data is dynamic and at times i have say 3 data sets, and each one of them gets rendered in a separate row, while at other times i have 15-20 data sets and it becomes messy.
Anyway the solution is to restrain the legend to the width of the div, that it is rendered into, yet it doesn't seem to be accepting any css alterations. I tried adding width:250px; to the "jqplot-table-legend" in jqPlot css, i also tried adding it into various places using Inspect Element in Chrome to test whether it works, but it doesn't seem to accept the new width. I also tried to hard code it into the javascript file at various places with no luck.
I'm not sure what I can add to the question in terms of code. Everything is pretty standard on the jqPlot side.
Any suggestions on how to get around this will be much appreciated.
This seems like the quick and dirty way, but it gets the job done. I'll use the jqplot.pieRenderer.js file as the example since it's easier to read than the minified version. Open the js file and scroll down to line 568. Right under
this._elem = $(document.createElement('table'));
this._elem.addClass('jqplot-table-legend');
add
this._elem.css({width: 300});
That will stretch the table out to whatever width you need it to be. Unfortunately, it also stretches out the column with the color swatch so you'll now need to scroll down a little further until you find
td1.css({textAlign: 'center', paddingTop: rs});
change that to
td1.css({width: 16, textAlign: 'center', paddingTop: rs});
and you should be all set.
Another method:
Just add these lines:
if (this.width) {
ss['width'] = this.width;
}
They allow you to set an arbitrary width in each different graph
You might also want to add these lines in jquery.jqplot.js (i.e if rendering bars)
Search for "createElement('table')" as described by mike
Worked for me

Change the background colour of a Raphael "Label"

If I create a Label using Raphael, the default style is a black block with white text.
How can I change the background box colour, but not the text colour? I've tried:
paper.label(x, y, value).attr("fill", colour)
but that also fills the text and I end up with invisible text.
I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:
As you noticed,
Paper.label(x, y, value).attr(
fill : color
);
changes both the background fill color and the text fill color, resulting in invisible text.
Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.
Paper.label(x, y, value).attr([{
fill : backgroundColor
}, {
fill : textColor
}]);
You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/
I was working on a graph similar to this and used:
.attr({fill: "#EF7C4D"})
Let me know how this goes...
var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});​​​​
text.label().attr({fill:"#f00"});
Here's a working fiddle http://jsfiddle.net/vpGyL/216/
Set any color on text or on label both apply separately...Hope this helps !
Digging in furthur...Paper.label(x,y,text) is different from Element.label()
If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).
Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).
While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle

Categories