I've got a chart built using 3 series arrays, each with 5 points of data, displayed as a stacked column chart for each of 5 unique products. Please see this fiddle for a de-branded exampled.
For all my research so far, it seems the plotOptions.column.colorByPoints option is the most likely solution to this, but it's only getting me half way there.
Following the series structure, I need the chart colours to match the following structure:
[ /* note: this example uses pseudo colours */
[transparent, transparent, transparent, transparent, transparent],
[lighter-blue, lighter-green, lighter-red, lighter-yellow, grey],
[blue, green, red, yellow, black]
]
Unfortunately, setting colours for each series does not help because each point in the series needs to be different.
For the record, the plotOptions.column.color option associated with colorByPoints only seems to accept one array (a nested array matching the data structure does not work here), but it applies to each stack as a whole, so setting a single array of 15 colours in my case only makes use of the first 5.
This is perplexing me, am I missing something silly here or is this simply not possible with Hichcharts?
In this case you need to supply the color in the data point object.
ie:
data: [
{y:15, color:'blue'},
{y:64, color:'red'}
]
Example:
http://jsfiddle.net/jlbriggs/rbx9h3r5/3/
Related
I'm currently using Apexcharts to display a data series. In one of the options, I can select an array of colors as defined in the documentation, which is an array of strings. Obviously, passing in hex strings works just fine.
However, what I'm trying to do now is to have my data series on my graph show with patterns. I understand that I can use the fill object as defined here, but that would define a pattern for the whole graph, whereas I would like to define it for certain data only.
Since the color array is an array of strings, is there a way where I can define something like linear-gradient or something equivalent but in string format?
EDIT:
As an example, suppose I have this data series from the Apexchart website. Is there a way that I can set a condition, say if the person is 'Joe' and the type is 'test', then set the gradient to be something (for example gradient: slantedLines)?
The result would therefore be something like:
EDIT2:
I have also seen another question whereby we can specify the property fillColor to specify the color of a given bar in this post. Is there an equivalent to explicitly set the gradient?
The question needs some clarification, but this seems to be the most logical answer:
Part 1
In a multi-series chart, you can pass an array to allow a combination of fill types like this:
fill: {
// All series use same type: gradient.
type: 'gradient'
}
/* OR */
fill: {
// Series alternate between solid type and gradient type.
type: ['solid', 'gradient']
}
Part 2
Then, if you want each gradient to use different colors, you pass them as arrays in fill.colors and fill.gradient.gradientToColors (You need two different arrays because gradients transition from a "start" color to a different "end" color.)
gradientToColors: Array
Optional colors that ends the gradient to. The main colors array
becomes the gradientFromColors and this array becomes the end colors
of the gradient. Each index in the array corresponds to the
series-index.
The above is an explanation of how to specify:
A fill type (solid, gradient, pattern, image) for all values in each series. (The two series from the linked example are blue 'Bob' and green 'Joe'.)
When fill type is gradient: the start/end colors for each value in a series. (The three different values from blue series 'Bob' are '3 days', '3 days', and '5 days'.)
The question is ambiguous and may be asking for something else (which may not even be supported by ApexCharts.) If the above did not answer the question, I suggest adding a sample mock-up image of the desired chart output.
Update: How to change the pattern ('gradient' and 'pattern' are two different types of fills: slantedLines is a pattern, not a gradient.)
The following options causes the 2nd and 3rd values to use patterns (it does not repeat as I assumed).
...
...
fill: {
type: ["solid", "pattern", "pattern"],
pattern: {
style: "slantedLines"
}
}
...
...
Modified code sandbox:
I'm hoping the color.pattern array allows the code to specify the color of each dot on the chart, but given this example I'm not sure it even does anything:
http://c3js.org/samples/options_color.html
What does it do?
Your initial guess was more or less correct. You can use it to set the colors of each line on the chart.
The array can be longer than the actual number of data columns - if there were more data arrays in that example, the unused colors would have been used.
I have a data structure like:
{
id: X
subId: Y
}
The id should decide what kind of color (greenish, blueish, redish, yellowish) it should be. d3.scale.category10() should be enough.
From this color I would like to have 'subcolors' (different blues, different greens) for every subId (the more different they look, the better - however, seeing the difference between id's is more important than seeing the difference between subIds).
How would I solve this problem?
You can use D3's .brighter() and/or .darker() functions to modify the colours you get from the scale for the categories. Note that both functions take an argument that allows you to control how much brighter/darker the colours get (values less than 1).
I am trying to get the raw pixel data from two "items" in paper.js. One is already a Raster object so that's not too bad. The problem is that I have another Group object containing a bunch of triangles and I want to capture the Raster data for that layer and then be able to compare it.
I have the following (highlighted lines) code:
https://gist.github.com/mtahmed/2b27c4c6aee42d3ac3fb#file-paper_update-js
It seems to always return 0 or some other odd unexpected number. Any hints/ideas?
Thanks! :)
It looks like you are always setting child_gene.visible = false, but never set it back to visible = true before you rasterize the layer in computeFitness(). I'm not sure that there's a need for juggling layers in each frame - it should work just as well without it.
Here's a simplified example that uses a square with a gradient as the target raster.
I have a chart here: http://jsfiddle.net/wergeld/bx82z/
What I need is for the stacked bars and the scatter points to line up on each other based on the data X-element (county name in this case).
Getting the bars to stack was simple. But as you can see in the example the scatter points show up in the middle of the chart - not on the same x-value as the others.
I suppose I could create a category list (using the county names) but there may be cases where I do not have all 3 data elements for all counties - how to handle that scenario?
I did great the category axis and it is still doing the same thing: http://jsfiddle.net/wergeld/YckwW/
You were not defining the series correctly to achieve what you were wanting. See updated jsfiddle for what I think you are looking for.
In the cases where you are missing a piece of data for one of the countries you could always use null, which simply means there is nothing to display for that data point. See Missing Data Sample for an example. It is case sensitive so make sure that null is all lower case.