How can I sort the legends values (40, 80, 10, 5) in descending order?
The first value should be displayed in Green color and then other 3 will be any colors.
I tried with this code to display my first legend item in green color. Any Ideas for sorting the legend item?
{name: '{/literal}{$value.0.opt1}:{$a}{literal}',y: {/literal}{$a}{literal}, color: '#6B8E23'}, //green
{name: '{/literal}{$value.0.opt2}:{$b}{literal}',y: {/literal}{$sort.0}{literal}, color: '#A9A9A9'},
{name: '{/literal}{$value.0.opt3}:{$c}{literal}',y: {/literal}{$sort.1}{literal}, color: '#696969'},
{name: '{/literal}{$value.0.opt4}:{$d}{literal}',y: {/literal}{$sort.2}{literal}, color: '#FFFFFF'}]
P.S. I am not familiar with jQuery.
The only way to sort the legend values quickly is to add your series in the order you want the legend to be in. See this answer. You could try and create a javascript custom legend to do what you want as well - I have no quick answer for how to do that. If what you mean is that you want to order the points in a series in descending order you would first need to provide an example of what your actual data looks like: is it time based? category? linear?
To have the first value in a series be green you can use the point color like this.
i find a solution. you should sort the legend values before pass the values in data. then set the colors in array.
Related
In Vaadin 14.4.2, is it possible to create a Chart with multiple series in a way in which the color of the series is programmatically calculated? Specifically, I may have ~100 series, but they all are associated with a "number" (specifically a mass of a chemical element). Since I know what in my application the "number" (ie the mass) will range from 100 to 2000, I would like the color of the series to range from blue (at 100) to red (at 2000). This way, when a user looks at the graph, they intuitively know whether the series refers to a heavy chemical (red) or a light one (blue).
In order to accomplish this, I think I would need to have some way of programmatically setting the color of a series, but I do not think that's actually possible in Vaading 14.4.2, right?
Here's an example of such a chart:
Color of the data series are defined by the custom properties --vaadin-charts-color-0, --vaadin-charts-color-1, ... , --vaadin-charts-color-9. You can programmatically define their values like follows
charts.getElement().getStyle().set("vaadin-charts-color-1","#2dd7a4");
The second string parameter is the color value, it can be any format accepted in CSS.
Is there any way to get the legend "icon" in tooltip? I need to show the legend "icon" in the tooltip so i can identify what series I'm referring to.
I'll try to explain it better.
When you create a chart, in the legend, next to the name of the series, there is a "mini" line, that represent the line of the series, the color, and the style.
That what I need to show in the tooltip.
I'm not referring to the dot marker but the small lines that appears in the legend.
Is that possible?
Edit:
I'm using the formatter that the tooltip api provides. There I have a reference of the point that I'm hovering on, and all the data associated to that point.
I can get the value, the chart, the series, the series to which it belongs, que point marker, almost everything.
But I can't figure how to get the little coloured line that appears next to every series name in the legend.
I guess is as simple as get one of the values that appears in the point data, but I don't know what I should look for, there are a lot of properties.
I found a solution.
You can look for the point.series.legendLine.
There you have all the info required for the legend svg, even you can get the outerHTML and paste directly to show the legend icon.
Is there a way to order the column display in order to force the columns with smallest values forward (higher z-index)?
Here's a non-grouped column chart, which is accomplished by setting the grouping: false in the column settings for the plotOptions.
The idea is to always have the smaller bar on top (if there are multiple bars, continue stacking the taller ones behind). Notice this example uses transparency to circumvent that issue; however, the new color is not reflected in the legend.
I've scoured the Highcharts API but couldn't find much information.
In order to do what you're asking, you would have to set a z-index value for each data point in each series (similar to how you can set a unique color for each data point, such as data: { y: 10, color: 'blue' }).
Unfortunately, the Highcharts API doesn't recognize z-index values for individual data points. Different z-index values can only be applied at the series level.
You may want to consider translucent columns with different widths, as shown in the "fixed placement columns" demo: http://www.highcharts.com/demo/column-placement
I hope this information is helpful for you.
I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible
I'd like to add an element (a circle) above some of the columns in a Highchart generated chart. In this chart, columns are stacked, to visually compare two series. But sometimes I need to draw a circle above some of these columns to show this year something special happened. I've tried to create a dummy serie, with bubbles but it doesn't work. So I believe that draw api is a better option, but I don't know how to calculate where I have to draw, to set element attributes x and y.
You can use image renderer http://api.highcharts.com/highstock#Renderer.image() or more user friedly, scatter series which allows to define your own markers (like images). http://jsfiddle.net/cKKhF/
{
type:'scatter',
showInLegend:true,
data:[10,9,11,11,8],
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}