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.
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.
Suppose I want to create two charts with horizontal bars. The names of the objects are listed on the y-axis and the horizontal bars represents some quantity. The first chart has 100 items and the second chart has 5 items.
When I create the charts the horizontal bars have different widths. I'd like the bars to be the same width across all of my charts.
I know I can try different values for the height parameter to the AddShape function. But that seems time-consuming and unreliable since the number of items can change. I'd like to do something like:
Chart.BarWidth = 10
The "thickness" of each bar will be primarily determined by the number of data points that need to be plotted. The more data points to plot, the thinner the bars will be. There are some options to further tweak them, such as IChartGroup.GapWidth, and you're welcome to try to adjust this so that both charts match. But I suspect that it will be very difficult to do this reliably, particularly if the number of plotted points is expected to change over time.
To maintain the same bar thickness for multiple charts, I think your best option will be to ensure both charts' series refer to the same size range. So if your first chart refers to 100 cells, have your second chart refer to 100 cells, even if only 5 are populated with values. The empty cells should not plot but will still take up space and therefore maintain consistent bar thicknesses between your two charts.
Highcharts columns sometimes don't make proper use of the available height, in some cases leaving nearly the upper half of a chart empty. After fiddling with the official example charts I noticed that the y-axis max extreme (internally) seems to be dependent on the chart's container height.
For example, the Highcharts example for stacked column chart:
The original example (container height of 400px) has a max of 12.5 for the y-axis with the largest columns having a value of 11. ~90% of the chart height are used.
When modifying the height to 300px, y-axis max changes to 15, so that only ~75% of the height is used.
When modifying the height to 200px, y-axis max changes to 20, only ~55% of the height being used.
Is there a way to improve this behavior without programmatically setting the axis extremes whenever the displayed data changes? You might argue that applying such a small height to a column chart is a weird thing to do, but this is just an example, I have seen similar behavior with larger charts (having other data).
This is related with fact, that defaulty highcharts has enabled maxPadding. Set that parameter as 0 to fillout area more efficient.
yAxis: {
maxPadding:0
}
The example charts could be fixed with Sebastian's answer. After applying the change to my own chart, I noticed another problem that screwed up the scale even more, but was not part of this question - adding this as another answer, just for the sake of completeness.
My chart consisted of combined column/line chart with a 2nd y-axis. Depending on its values, the line chart series had strange effects on the scale of the columns (even if the line chart series was empty). Doing some more research I found this SO answer pointing me to Highcharts' alignTicks option, setting it to false resolved the issue.
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 have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.