I am trying to get a barchart to render different color based upon the value (meaning if one line is value 8 i need to get it with everything under 6 is red, 6-7 is green and the rest i green).
For example
score 8 == [red color up to 5 | blue color from 6 to 7 | green color from 8 to 10]
score 6 == [red color up to 5 | blue color from 6 to 7 ]
etc...
I spent too much time on this browsing through the examples on highcharts trying out different jsfiddles... I assume that it is an easy fix but something i have overlooked
Any ideas?
Highcharts provide color zones API to render different colors based on values.
JSFiddle
I have provided a plotOption example as below. Based on your requirement the zones would be
plotOptions: {
column: {
zones: [
{
value: 6, // Values up to 6 and not including will have red color
color: 'red' // ... have the color blue.
},
{
value: 8
color: 'blue'
},
{
color: 'green'
}
]
}
}
Related
This is the link to the fiddle
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/box-plot-styling/
Below are the plotOptions.
plotOptions: {
boxplot: {
boxDashStyle: 'Dash',
fillColor: '#F0F0E0',
lineWidth: 2,
medianColor: '#0C5DA5',
medianDashStyle: 'ShortDot',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'dot',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
}
This boxplot shows high and low values in green color. In my case I need to change the high value(Q1) color in red and low value color in green.
How can I do this.?
Thank you
Currently it's not possible in Highcharts by default - related github issue: https://github.com/highcharts/highcharts/issues/6796
Currently each box is a single SVG shape and a border is applied by
stroke parameter which cannot be "separated" for smaller edges. As a
result, you can apply only single color.
Your goal requires a rebuild core of boxplot, so we cannot threat it as a bug, but feature request.
As a workaround you can render custom paths to cover one of the existing whiskers, for example:
events: {
render: function() {
var series = this.series[0],
attr,
paths;
series.points.forEach(function(point) {
paths = point.whiskers.d.split('M');
attr = {
d: 'M' + paths[1],
'stroke-width': 2,
stroke: 'red'
};
if (point.customHigh) {
point.customHigh.attr(attr);
} else {
point.customHigh = this.renderer
.path()
.attr(attr)
.add(series.group);
}
}, this);
}
}
Live demo: https://jsfiddle.net/BlackLabel/vcefbk46/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
I would like the bubble's color have different colors according to their value from 2 colors range (lightest is low value and darkest is higher value).
I used the colors array like this:
colors: ['#69ADC7', '#4F4899']
fiddle here
But still I get only 1 color for al bubbles.
Any ideas please?
You are using object in data so you must define the color for each object :
...
{
x: 74.2,
y: 68.5,
z: 141.5,
name: 'FR',
country: 'France',
color:'#4F4899'
}
...
Edit
Add this code :
plotOptions: {
series:{
colorByPoint:true
}
},
Updated Fiddle - Api link
I am using Amibroker. I would like to make a plot of the array PCT_CLOSE such that the color is red when PCT_CLOSE<=25, yellow when between 25 and 50, Green when PCT_CLOSE>=50.
Right now, due to the IIF function constraint, I can only create a plot with 2 colors. Below is how I did it with 2 colors.
Plot( PCT_CLOSE , "CLOSE", IIf(PCT_CLOSE<=50, colorRed, colorYellow), styleNoTitle | styleLine | styleThick );
I will answer my own question.
Color criteria in question:
color is red when PCT_CLOSE<=25, yellow when between 25 and 50, Green
when PCT_CLOSE>=50
The key is to have nested IIF statements. Put IIF inside IIF.
Here is the corresponding code;
color = IIf(PCT_CLOSE<=25, colorRed, IIf(PCT_CLOSE>50, colorGreen, colorYellow) )
What is the best way to achieve a chart with multiple types when it should include a type that has the following kind of visual presentation.
| yellow |blue| gray | yellow | gray |
i.e. a type which is one dimensional (but visually has height), and the color indicates 'y' (which here consists of categories: yellow, blue, gray)
You should also be able to stack those:
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
I can achieve this with having a chart typed column with a series for each category:
http://jsfiddle.net/RCnYV/
But how can I also add another chart type above that, like:
yAxis (only for the line)
^ ___
|------- ___________________________ ____/
| \__________/ \/
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
-----------------------------------------------------------> xAxis (shared)
So the line series should be above (not hovering over) the others. Note that the xAxis is shared between all of the series, i.e. all of the series have exactly as many data points. It is just that some of the series are presented as type 'line', and others with the new type (that I don't know good name for, ribbon?).
Also what other ways are there to create a similar chart? One problem with the above is that I need to create one series for each catalog, that is 2 * series in total, and not just two as would be the case with basic chart.
Are you looking for something like this # http://jsfiddle.net/jugal/cABfL/ ?
You can stack the charts by specifying heights for your yAxis, and manipulating its top so that they stack one over the other
yAxis: [{
top: 300,
lineWidth: 2,
offset: 0,
height: 200,
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ": " + $wnd.Highcharts.numberFormat(this.y, 2);
}
}
},
{
height: 200,
lineWidth: 2,
offset: 0,
tooltip: {
enabled: true,
formatter: function() {
return this.value + 50;
}
}
}],
Similar stacking example is available # http://www.highcharts.com/stock/demo/candlestick-and-volume
EDIT
To answer to the second part of the question (Also what other ways are there to create a similar chart?). There isn't anything out of the box that highchart seems to bring to the table for such a visualization, so you would need to work yourself around the existing lines and columns to get this visualization.
This is how I went about it.
I tried using the stacked bar chart for each ribbon, hence would need 2 series, 1 for the line and 1 each for both the ribbons. But after giving it a try, turned out the bar chart is nothing but a rotated column chart (at least a sort of), it seems to have the vertical axis as the X and horizontal one as Y, hence it messes up any other chart, i.e. the line chart gets messed up as it wants the horizontal to be the X.
Basically using a bar chart didn't take me much far. I went ahead using the line chart (With a very thick line lineWidth:50) and drew a horizontal (Constant Y for each point) line chart with one series for each section of the ribbon, hence being able to give each section different color. Each ribbon would need a separate Y-axis, with different offset as mentioned above. Also removed all the tooltip, Y-axis labels and grid lines, to make it look as different from a line chart and more like the ribbon. Tooltip may be needed, but line charts give tooltip for points, in our case we want tooltip on section between two points, hence wrote a mouseOver event handler and calculated the length of the section in there. The only part that was hurting now was creating a series for each section of the ribbon, so went ahead and wrote the following utility function that accepted a list of values, basically the x intercepts for each section (you can improvise it to take section length instead) and returned an array of series.
// usage: createSeries([0, 3, 4, 6], 1)
// Creates 4 series and assigns them all to yAxis 1
// you can extend this to take colors etc too, as per requirement
function createSeries(data, yAxisIndex) {
var i;
var series = [];
for (i = 0; i < data.length - 1; i++) { // Node lenghth-1
var start = data[i];
var end = data[i + 1];
series.push({
yAxis: yAxisIndex,
animation: false,
stack: 0,
data: [[start, 0], [end, 0]],
lineWidth: 50,
marker: {
enabled: false
},
tooltip: {
pointFormat: function() {
return "";
}
},
events: {
mouseOver: function() {
alert(this.data[1].x - this.data[0].x);
}
},
showInLegend: false
});
}
return series;
}
All that was needed was to push these series into the existing series and then feed it to the highchart constructor.
Final jsFiddle: http://jsfiddle.net/jugal/cABfL/