I'm testing boost mode in highcharts and cant get some of the styling to work when webGL render is on. Small example, this is normal mode with boost.useGPUTranslations = false:
Everything is fine and the way I set it up. Next screenshot is the same chart with same options except boost.useGPUTranslations = true:
Is this an intended behaviour or am I doing something wrong?
I'm using latest "highcharts": "^7.0.1" npm module.
BTW the legend is displayed correct, the way lines should be.
Related
Earlier, I asked how to create "spectra" charts in Vaadin (see How to create a "spectrum" chart using Vaadin 14+). It turned out that one didn't actually need to create barcharts -- the only real need seemed to be to set the pointwidth to 1. (This solved the "very wide" widths lines when zooming.)
HOWEVER: I think there's a bug in vaadin charts when one has more than 1 series presents and when one zooms: the line moves to an inccorrect position on the x-axis (or the x-axis is no longer placed correctly.) Any thoughts on how to resolve? Here are two screenshots showing the problem. In the first one, only ONE series is visible and the line is at the correct x-axis point of ~598.36. In the second screenshot, though, (where the only change I have made is to enable the 2nd series), the line moves to an INCORRECT x-axis coordinate (it seems like it's ~598.25!!!).
One theory I have is that adding the second series somehow confuses the chart from determining the correct x-axes....maybe because each series has it's own x axis logic in some way? Not sure....(I'm using Vaadin 14 and I tested this both in my dev env and on production.)
In Firefox 44.0 Windows, part of the labels on the y-axis don't appear; instead a "..." is being displayed. I have tested the page in several other browsers where it works fine (here is a link). Looks like this:
I'd say there is enough space for writing the whole four numbers - that is years, instead of "19...".
Any idea what I can do about it?
Does highcharts support phase change lines ? It may be called multiple things but im looking to see if an X axis delineation line can be drawn in highcharts. It is used to specify a specific date in time where something in the environment changed. The chart reader would then look at that line and see if that change to the environment impacted the data represented by the lines in the line chart.
Anyone know if this can be done with high charts ? Sample image attached.
Great answer from Ondkloss: http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines That page shows exactly what I was looking for.
looking for high chart sample program, I haven't used Highcharts before, but it seems there are no sliders built take a look at the answer.
Actually Highcharts in general are not free.. For me it's simple bullet graph. In Highcharts for that you can use bar chart with scatter point
The bullet concept will work for this, though it will take some work to get styling like that. There are plenty of useful options for styling such a chart though without relying on the physical gauge metaphor.
A quick variation on the bullet chart approach that puts them into a single chart and removes the banding:
http://jsfiddle.net/jlbriggs/kwtZr/41/
It relies on a custom extension to produce the 'line' marker type:
Highcharts.Renderer.prototype.symbols.line = ...
{{
edit in response to comments below:
updated example with some additional formatting options and clean up:
http://jsfiddle.net/jlbriggs/kwtZr/55/
be wary of using multiple colors unless the colors truly mean something.
Using additional color to highlight items that require attention is a good use of color.
Using color to highlight every possible status of something (shades of green, fading to shades of yellow, fading to shades of red...), is a bad use of color that is sadly over used and even expected by some.
FWIW
Also important to reiterate that the purpose of this type of display is very well handled by a bullet chart, which is definitely worth looking into migrating to somewhere along the way. Reference:
http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf
http://en.wikipedia.org/wiki/Bullet_graph
I'm getting a bug in my stacked area implementation when a user filters to a specific line.
In the image linked below, you'll see we're tracking two trends. When I turn off the "Dialup" trend, the orange area should remain where it is. Instead, it moves up to fill the entire area. Likewise, if I were to turn off the orange "Broadband" trend, the green dialup area fills the entire area below it, rather than falling to the baseline as it should.
(stackoverflow will not allow me to post images yet.)
You can see the value in the tooltip remains accurate.
Could anyone provide some insight into what may be causing this? In case this may be a factor, the chart is generated based on a table of data using Highcharts.visualize().
I can see that you're using Highcharts 3.0.0. According to this, there was a bug in this version of Highcharts. If you upgrade Highcharts to the latest version, it should work as intended.