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:
Related
In jpgraph js library, for LinePlot, is it possible to have dots (plot marks) of different (customly defined) colors? Any experience anyone? I need to make different colors for some of the dots in the graph, for some values of x-axis.
By the documentation of jpgraph:
"The colors of the marks will, if you don't specify them explicitly, follow the line color. Please note that if you want different colors for the marks and the line the call to SetColor() for the marks must be done after the call to the SetColor() for the line since the marks color will always be reset to the lines color when you set the line color."
<?php
$lineplot->mark->SetType(MARK_UTRIANGLE);
$lineplot->mark->SetColor('blue');
$lineplot->mark->SetFillColor('red');
?>
In addition the plot mark formatting shown above plot marks also supports formating through the use of a callback function. The callback function will be passed the y-value as its only argument and the callback function must return an array consisting of three value, weight, color and fill-color. This could be used to for example alter the colors of the plot marks depending on the actual value. A common use of this feature is to create "balloon" scatter plot where a variable sized filled circle is positioned at specific data points. This is a way t create a 2D plot which conveys three values at each data point, x,y and size.
The closest example to your need would be this:
https://github.com/HuasoFoundries/jpgraph/blob/master/Examples/examples_line/builtinplotmarksex1.php
I have a dataset with the following schema:
{
"time": Date,
"foo": Number,
"bar": Number,
"change": Number
"place1": String,
"description": String,
"place2": String
}
And I want plot a series-chart grouping the place1 and place2 together, display time as x data, foo as y data and the other fields inside the tooltip.
Taking a look at this example the first thing I have done is to create a dimension and grouping the dataset using place1 and place2.
const placeDimension = ndx.dimension((d) => [d.place1, d.place2]);
After that I've created a group, since I want display data without aggregation I've only used the group function:
const placeGroup = placeDimension.group();
And from this point on I'm confused on how to use the two object created before for plotting the series-chart.
How can I select the property to plot in the X and Y-Axis? (In this case time for X and foo for Y?) .
How can I display the other properties inside the tooltip? (I know how to use the tooltip but I don't know how to use data that are not inside the dimension).
In dc.js and crossfilter, the X axis is usually the "keys" of your grouped data, and the Y axis is the counts (or other aggregations).
If each of your keys are unique and you do
const placeGroup = placeDimension.group().reduceSum(d => d.foo)
then it will sum up the one value and return it to you. So your keys (X) will be place1,place2 and your values will be foo.
Then you can use the seriesAccessor and keyAccessor to pull the keys back apart, as in the example you linked.
Tooltips are called "titles" in dc.js, after the HTML/SVG element which implements them. You can format your text however you want in the accessor, including line breaks. The annotated stock example shows this in action.
Caveat
All this said, there aren't very many good reasons for using dc.js with unaggregated data. The library only shines when there are interactions by filtering the charts, and filtering will only work if the data is aggregated with crossfilter.
It will probably be easier to learn another charting library, since you aren't using any of the functionality that makes dc.js special.
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'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/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Highstock/Highchart cannot set Individual Point color
Currently use the addPoint function to update the highcharts graph, certain points need to be highlighted/different color... I can't find a method to do this in the api reference, is it possible?
//exampleA - Series arrayId
//exampleB - Point value
//exampleC when not null would has extra tooltip info, these points need to be a different color.
addPoint: function(exampleA, exampleB, exampleC)
{
mcjs.chart.series[exampleA].addPoint({ y: exampleB, exampleC });
}
Yes, it is possible.
You have the change the fillColor attribute inside the Marker inside the Data Attribute.
The color attribute inside data did not worked for me.
If you want the a green dot, you can look at this example I made.
Yes - color is an option in the options object you are passing to addPoint. Here's the API refernence for addPoint, and here's the description of the options available to you.
Your code should end up looking more or less like this, if you say wanted a green point -
mcjs.chart.series[exampleA].addPoint({ fillColor: "#659355", y: exampleB, exampleC });
Right now though the object you're passing doesn't quite look valid - you need to match a key to each value; exampleC has no key.