can you please take a look at this example and let me know why I am not able to add multi text to a the chart in one function?
I used this function
function(chart) {
chart.renderer.text('Papa 1', 90, 60)
chart.renderer.text('Papa 2', 140, 90)
.attr({
rotation: -0
})
.css({
color: '#B8B6B6',
fontSize: '12px'
})
.add();
});
but it is adding just the last text to the chart. Can you please let me know why this is happening and how I can have both (or more than two text) to the chart?
You forgot to add the first one. Change the first text to : chart.renderer.text('Papa 1', 90, 60).add();
function(chart) {
chart.renderer.text('Papa 1', 90, 60).add();
chart.renderer.text('Papa 2', 140, 90)
.attr({
rotation: -0
})
.css({
color: '#B8B6B6',
fontSize: '12px'
})
.add();
});
Related
I'm trying to create a chart that looks like the attached image.
I have come very close by using a bullet graph chart and I'm trying to get an arrow image dataLabel positioned on the series point but it sometimes goes to the right or left of the point. My intention is to have the series color transparent and have the datalabel visually replace the extending bar. not the target bar but the series bar itself. Buy my image not placed exactly on the point in the series OR is there another way to use an image or icon on top of the series point?
plotOptions: {
series: {
dataLabels: {
enabled:true,
useHTML:true,
x: -3,
y: 35,
format: '<img src="https://image.ibb.co/cqabM8/g3.png">'
},
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '300%'
}
}
}
Here is a JSFiddle used to try positioning the arrow...
Depending on how strict you are with how the data for this chart (in other words, where the arrow lies along the chart and how the colored zones are measured), there's a way to mimic this image using plot bands and line markers.
See my snippet below (or the fiddle at https://jsfiddle.net/brightmatrix/r78vz49a/).
I used plot bands to create the colored zones along an axis of 0 to 100 (assuming, for example, that 0% is fresh and 100% is totally rotten/inedible).
Then, there are two series: one with a marker that forms the arrowhead and a second that is simply a vertical line; both complete the arrow. So long as you keep the x-axis values for both the arrowhead and line consistent, the arrow would "move" along the line.
I hid the y-axis labels since they weren't relevant to your chart. If you wanted, you could also hide the x-axis labels and move your plot band labels below the chart.
Below is a screenshot of the final product. I hope this information is helpful for you in solving this challenge.
Highcharts.chart('container', {
title: { text: 'Freshness scale' },
xAxis: {
plotBands: [{
color: 'rgba(0,255,0,0.5)',
from: 0,
to: 33,
label: { text: 'Fresh', align: 'center', x: -10 }
},{
color: 'rgba(255,255,0,0.5)',
from: 33,
to: 67,
label: { text: 'Stale', align: 'center', x: -10
}
},{
color: 'rgba(255,0,0,0.5)',
from: 67,
to: 100,
label: { text: 'Moldy', align: 'center', x: -10
}
}],
min: 0,
max: 100
},
yAxis: {
min: 0,
max: 1,
tickInterval: 1,
title: { text: '' },
labels: { enabled: false }
},
legend: { enabled: false },
tooltip: { enabled: false },
series: [{
name: 'Freshness arrow',
data: [{x: 55, y: 0}],
lineWidth: 0,
color: 'black',
marker: { symbol: 'triangle-down', radius: 10, y: -10 }
},{
name: 'Freshness line',
data: [{x: 55, y: 0},{x: 55, y: 0.5},],
lineWidth: 4,
color: 'black'
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 150px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I am trying to use the highcharts solid gauge, and I would like to have a legend, however Highcharts developers seem to have removed the color option from solid gauge series, which I believe is what the legend pulls it's color from.
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
color: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}],
showInLegend:true
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}],
showInLegend:true
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}],
showInLegend:true
}]
Jsfiddle
Is there any way to get my legend to match the series colors?
I haven't been able to figure out how to color the marker in the legend, but to me the markers don't make sense in this case anyhow. So, I've turned them off in my fiddle.
To color the text, you can use the legend labelFormatter function.
legend: {
labelFormatter: function() {
return '<span style="text-weight:bold;color:' + this.userOptions.color + '">' + this.name + '</span>';
},
symbolWidth: 0
},
http://jsfiddle.net/9dq2p7dw/21/
Just to add, Barbara's answer is still valid in 2019.
However, to remove the marker, you'll have to add
squareSymbol: false
I would have added this as a comment in her answer but I do not have enough reputation points.
I have multiseries spline chart. All series has own plotBand.
Is it possible to limit the plotBand interval by the length of the series?
Example, edited image:
plotLines can't help too:
plotLines: [{
value: 12345,
width: 10
}]
plotBands: [{
from: 30,
to: 45
}],
http://jsfiddle.net/r00tGER/1nuw4fqs/
This is not possible, but you can use Renderer.rect to add custom shape
chart.renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
})
.add();
Second solution is using annotation which allows to add rectangles.
Add one more range-type series as plot for every series.
series: [
{
name: 'as Plot',
type: 'areasplinerange',
data: [
[1434620400000, 58.0, 68.0], [1434620640000, 58.0, 68.0]
],
zIndex: 0
}
]
});
http://jsfiddle.net/r00tGER/ueqht2eL/
I have plot in high-chart with 1000 polygon series but i cannot show all legends. So i just want to keep four legend(after grouping multiple polygon series) and want to write their legends.
1. case 1. Red color box
2. case 2. Blue color box
3. case 3. Green color box
4. case 4. white color box
But how can i put that legend in highchart as high chart only generate legend based on series data. Or can i add static image already generated seperately in highchart multi-polygon series (showinlegend: flase) so that it should appear as legend in polygon series?
As per your requirement , if you just want to show four non-clickable legend like indicators you can use renderer like below :
function(chart) {
chart.renderer.rect(80, 75, 10, 10).attr({
fill: '#C5FFC5',
}).add(); chart.renderer.text("Series 1" ,100, 85).add();
chart.renderer.rect(80, 95, 10, 10).attr({
fill: 'red'
}).add();
chart.renderer.text("Series 2" ,100, 105).add();
chart.renderer.rect(80, 115, 10, 10).attr({
fill: 'green'
}).add();
chart.renderer.text("Series 3" ,100, 125).add();
}
Edit in your code ,place this code like below:
$.getJSON('data10.json', function(data) {
options.series=data;
options.chart.zoomType='x';
chart = new Highcharts.Chart(options);
chart.renderer.rect(80, 75, 10, 10).attr({
fill: '#C5FFC5',
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text("Series 1", 100, 85).add();
chart.renderer.rect(80, 95, 10, 10).attr({
fill: 'red',
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text("Series 2", 100, 105).add();
chart.renderer.rect(80, 115, 10, 10).attr({
fill: 'green',
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text("Series 3", 100, 125).add();
});
See the working fiddle here
Can the cross-hairs for Highcharts show on top of the area chart instead of being hidden beneath it?
Here's an example of the problem jsfiddle.net/hHjZb/1286/
Update:
Highcharts has now implemented the OP's feature request. You can now specify the zIndex in the tooltip property. Like:
tooltip: {
crosshairs: [ {
width: 1,
color: 'lime',
zIndex: 22
}, {
width: 1,
color: 'lime',
zIndex: 22
} ]
},
At the time of this question, Highcharts did not give us a way to do that. Not even CSS styles can change the plot order (visibility).
Consider making a feature request. (Update: the FR was made and implemented.)
Meanwhile, you can tweak the Highcharts source (in that example, it is highcharts.com/js/testing.js).
Find this line in the source file:
attribs = {
'stroke-width': crosshairsOptions[i].width || 1,
stroke: crosshairsOptions[i].color || '#C0C0C0',
zIndex: 2
};
and change the zIndex to 20.
Then find this line in the source file:
var group = renderer.g('tooltip')
.attr({ zIndex: 8 })
.add(),
and change the zIndex to 22.
There is a zIndex attribute for crosshairs:
tooltip: {
crosshairs: [{
width: 3,
color: 'green',
zIndex: 50
}, {
width: 3,
color: 'green',
zIndex: 50
}]
},
http://jsfiddle.net/hHjZb/3711/