I would like to add columns inside the area of chart red for negative and green for positive like attaching screenshot.
https://prnt.sc/psk7ge
You need to create a chart with area and column series. The set the colors, use negativeColor and color options:
series: [{
type: 'area',
data: [10, 20, 10, 20, 10],
threshold: -20
}, {
type: 'column',
data: [-10, 10, -15, 10, 15],
color: 'green',
negativeColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/owh16dzL/
API Reference: https://api.highcharts.com/highcharts/series.column.negativeColor
Related
I want to create PIE chart using Highchart as below image, please suggest a solution-
Thanks
You can use two pie series with different innerSize and size properties, for example:
series: [{
data: [{
y: 1,
color: 'blue'
}]
}, {
size: '70%',
innerSize: '30%',
data: [{
y: 3,
color: 'green'
}, {
y: 12,
color: 'blue',
showInLegend: false
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4b1phj67/
API Reference: https://api.highcharts.com/highcharts/series.pie
I need to hide the last point in a serie but have to keep the label. Seems is only possible to set a pointWidth but not a pointHeight. How can i force to display the label and hide the column bar for the last point?
series: [
{
type: 'column',
data: [1, 2, 1, 2, 3, { pointWidth: 0, y: 5 }]
}
]
Here's a demo of the current/expected behavior
Thanks
You could set the color of the last column to transparent:
series: [{
data: [3,5,7,4,{y:5,color: 'transparent'}]
}]
Example:
http://jsfiddle.net/jlbriggs/7o2hafuy/
With dataLabels Api Doc that's possible
series: [{
type: 'column',
dataLabels:{
enabled:true
},
data: [1, 2, 1, 2, 3, {
pointWidth: 0,
y: 5
}]
}]
Fiddle
How do I create the bar chart below? There are two versions. Thank you.
You can achieve the result with a stacked bar chart. Two series - one with the actual data, and the other for filling a bar and keeping labels. You should normalize the data your own (setting complementary values for the second series and min/max for axis).
series: [{
color: 'green',
data: [5, 3, 1],
dataLabels: {
align: 'right',
format: '{point.y} %'
}
}, {
color: 'grey',
data: [{
y: 3,
label: 'Footbal'
}, {
y: 5,
label: 'Soccer'
}, {
y: 7,
label: 'Baseball'
}],
dataLabels: {
align: 'left',
format: '{point.label}'
}
}]
example: http://jsfiddle.net/tPw24/553/
For the second chart, just swap the colors and data: http://jsfiddle.net/tPw24/555/
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/
[example jsfiddle](http://jsfiddle.net/YpfBs/22/)
2 problem:
I create a charts with multi pies, but some of pies was hidden. If I change the height of container, every one of the pie get bigger, but still some pies was hidden.
There are different name of each pie,so how can I display the name in pie?
I have found the way to set size for chart and pies.
chart: {
renderTo: 'container',
type: 'pie',
height:800 //height for chart
}
size in series set total size for pie,innerSize set inner blank size for pie.
But what about the 2nd question? How can set to display name for every pie?
For pie labels, use chart labels, for example: http://jsfiddle.net/YDdna/
Code for all: position + inner size + labels:
$('#chart').highcharts({
labels: {
items: [{
html: '1st title',
style: {
left: '220px',
top: '90px'
}
}, {
html: '2nd title',
style: {
left: '220px',
top: '310px'
}
}]
},
series: [{
type: 'pie',
center: [220, 80],
size: 150,
innerSize: 90,
data: [3, 4, 3]
}, {
type: 'pie',
center: [220, 300],
size: 150,
innerSize: 90,
data: [3, 4, 3]
}]
});