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.
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.
b.yAxis().setLFormat('{value|' + parseInt(myvalue[7],10)+ '}');
Above code snippet returns values as "0.2" and increments by 0.2,0.4,0.6 but I need this whole number like 1,2,3,4....Found allowDecimals: false option but not sure how to pass to get the round value.Can somehelp me.
I had missed it: you want to display only the integer ticks in the graph, not to round off your float values. That's a different matter. You need to check on the documentation for the library you're using.
First off, you need to tell us what library you're using. From what you say (setLFormat, allowDecimals, javascript) I believe you're using HighStock.
Then you check either the documentation or the user forums for the relevant software. In this case you're in luck, the documentation is exhaustive. You may have already checked out that page, but possibly you did not notice the links to the examples.
Also, the structure of the property JSON is given on the left hand side of the page; as you can see the allowDecimals for yAxis must be supplied on the HighChart container call, not on each single value.
You can see its use from this fiddle (click here).
You need to specify, for Y axis,
yAxis: {
title: {
text: 'Flats'
},
allowDecimals: false
},
If you need BOTH effects (integer points and integer grid), then you need apply both methods: set allowDecimals to false, and use Math.floor(value) or Math.round(value) instead of value on each value.
If my guesses are correct and this answer works, apart from accepting it :-), you may want to edit your title to reflect the fact that you're using HighStock JS library and you want it to use an integer grid. This is possibly the reason why you got downvoted; you may want to check out this page. (None of us started out asking good questions - I know that I definitely did not.)
I'm trying to build a highchart that when you hover over a scatter point you will get a separate unique id for the point. I dug around for this information in the forums for a while and can't find it.
I found this: Display array values as unique tooltip in highcharts but it's a category based reference. I want each point to have it's own id.
So my data is as follows:
Sample ID Y
Samp1 115.90 179.00
Samp2 37.50 188.00
Samp3 27.80 64.00
Samp4 51.90 228.00
Samp5 27.20 863.00
Samp6 478.80 575.00
Samp7 39.10 598.00
Samp8 22.80 244.00
I want the tooltip to display the series name, sample and the values of x and y for each point.
This helps me identify a point easily by not having to look it up by the x and y values. So for each point I want the tooltip to report the sampleID (which would be samp1, 2, etc)
here is the fiddle: http://jsfiddle.net/776yN/
I advice to parse your data (in preprocessing) to avoid using array (for single point) like [10,10] but use object
{
x: 10,
y: 10
id: 'sample12'
}
Then you will have access to custom parameter by this.point.options.id in tooltip parameter
I'm trying to filter data by clicking on certain rect bar in a stacked bar. This stack bar is a two dimention graph, the horizontal index is years, and the vertical index different product revenues, I want to filter by certain product in certain year. means when I click on a rect bar of the whole graph, the data should get filtered by certain year and certain product.
my code is :
metrics.on("click", function(d,i,j){
d3.select(this)
.style("fill","lightcoral")
.style("stroke","red");
fdata =rawdata.filter(function(d){return (d[xvalue]==_seriesA[i])&&(d[yvalue]==_seriesB[j])});
});
but the weird thing is the value of j is always undefined, although if I attach a title to it :
metrics.append("title").text(
function(d,i,j) {
return i + ' - '+j ;
});
the value of j will get printed correctly, is there anything special about the 'on' click function? why I cannot get the value of j? any help will be appreciated....this is triving me crazy for the whole night...
According to the documentation, the second argument to .on() is a function that takes two arguments, not three. Similarly, it shouldn't work in your second example either.
I think you're getting confused about the distinction between the data and how it is rendered. The .on() function will get you the data. The scales you have created somewhere in your code take that data and map it to x and y coordinates in your graph (or you use the data directly without scales). In the .on() function, you use the data in exactly the same way you used it when you created the graph to start with. That is, the data item (d in your code) contains the data for the specific position that you're highlighting.