I have to do a line charts with threshold y=5 where y>5 circle color is green y<5 circle color is red and circle y=5 circle color is orange. Using simple threshold i can draw only 2 color in red and green but i can't do the orange one.
{
name: 'Series1',
data: [
{y:2},
{y:6},
{y:5},
{y:6.5},
{y:3},
{y:10}
],
threshold: 4,
negativeColor: "red",
color: "green"
}
How can i do my chart with 3 color circle using threshold? and how can i take color only in circle but grey in line connected circle?
To do what you are asking will require using multiple series, as in this example:
http://jsfiddle.net/jlbriggs/yHn2D/
You can use the linkedTo property to make them all sit under one legend entry.
However, this kind of display inevitably leads to a a cluttered, overly colored, hectic display.
My example, even though the colors are toned down, looks a bit circus-like.
I would be much more inclined to do soemthing like this:
http://jsfiddle.net/jlbriggs/yHn2D/3/
Highlight the target range on the chart, in a subtle manner. When looking at such a chart day after day, watching for data that is outside of the acceptable range, a chart like this will make it very easy to see.
A chart that highlights every singly point, with multiple colors, whether they require attention or not, will drown the important information in visual clutter.
FWIW.
Related
My issue with the Highcharts Stacked Area chart is in how it selects which series to highlight. It SEEMS to highlight the series associated with the nearest point, whereas I would like it to highlight the series the mouse is actually hovering over.
In the image below, the mouse is actually hovering over the area in light blue, but because the nearest point is in the dark blue series, it's highlighting that area.
This causes an issue when you have multiple series stacked with very small and very high values (even zero). The user hovers a series with a large area, but the point it highlights might be associated with a series with no visible area (because it has a zero data point), and it will highlight the point with a tooltip saying something like "Switzerland: 0.00" rather than "Brazil: 9.999.99", even though you're hovering over Brazil
Disable stickyTracking and enable trackByArea options:
plotOptions: {
series: {
...,
stickyTracking: false,
trackByArea: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/7ens45ot/
API Reference:
https://api.highcharts.com/highcharts/series.area.stickyTracking
https://api.highcharts.com/highcharts/series.area.trackByArea
We are using the packed bubble chart but we are using the size AND color to represent the same data dimension (e.g. money each person has)
Functionally, the color is on a gradient from low to high. And now we would like to add in a legend kindof like what you have on a heat map (https://www.highcharts.com/demo/heatmap) where you can see the low color/value with a gradient to the high color/value. Your demo on the heatmap even has a sympathetic highlight between the cell and the legend... that would be cool to bring over. Hell, it would be super cool to even use the legend to filter or refine the circles!
Anyway. The core of the quesiton is, how can we bring that heatmap style legend into the packed bubble chart? Not the bubble size, but representing the color
You need to use color axis. It is a separate module, but it is also build-in in heatmap and map.
Highcharts.chart('container', {
colorAxis: {
...
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/smo3nfzj/
API Reference: https://api.highcharts.com/highcharts/colorAxis
Does anyone know how to achieve this in coreplot?
I can get the graph with the solid green and red lines, without the shading. And I can get the semi-transparent shading, without the solid green and red line. I cannot seem to get both. :)
You should be able to do this with only two plots, one for each color. Set both the dataLineStyle and areaFill for each plot. Be sure to set the areaBaseValue for each plot at or below the bottom of the plot so the fill extends all the way down.
In a chart, I have two lines with the same color and what distinguishes them is the dotted stroke on one of them. However, this difference is not visible in the legend (the two lines are solid).
How can I fix this?
Using highcharts, how would I put a default grey bar under my column charts, for example, like this?
And how would I do something similar for a pie chart (if my data takes up 30% of the chart, show the remaining 70% as light grey or something similar to denote unused space of the pie chart)
For the Pie chart there has been a bit of a back and forth in the highcharts forums. What I would do is get all of your data you need to plot and find out what percentage of the total all of that data is. Then, with the remaining percentage create another data point and set its color to grey.
But you really have to consider what is the total percentage means - without further detail I cannot begin to guess.
As for the first question about "default grey bar under my column charts" it is not clear from that link what you mean. I do not really see what you mean with the charts I have looked at.