How i can increase legend symbol size, I have tried these properties
symbolHeight: 12
symbolWidth: 12
symbolRadius: 6 but these are not working for line chart.
code:https://jsfiddle.net/juvcfkmh/4/
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Round legend symbols'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
series: [{
data: [1, 3, 2, 4]
}, {
data: [6, 4, 5, 3]
}, {
data: [2, 7, 6, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
The legend appearance is based on a series marker, so you can for example create another series without data, define marker options and link the real series.
series: [{
...,
id: 'firstSeries',
marker: {
radius: 15
},
data: []
}, {
...,
linkedTo: 'firstSeries',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/4yrk5dq1/
Related
I am looking for settings to change some of the frame-lines in the radar chart.
There are 3 types of lines I'd like to be customized:
The red triangle line outside.
The 3 blue lines from center to each corner.
The small green triangle.
I've searched a lot but totally had no clue. I have tried to change the lineWidth of the yAxis and it only changes the width of the upper vertical line.
Here below is the code. It uses the latest highcharts to render the chart, as of Sep 12 2021 when I'm writing this question, it's 9.2.2:
window.chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
polar: true,
type: 'area'
},
title: {
text: "radar chart title",
margin:33,
useHTML:true
},
tooltip: {
pointFormat: '<span style="color:{series.color}"><b>{point.y:,.0f}</b>'
},
plotOptions: {
animation:true
},
xAxis: {
categories: ["a","b","c"],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 4,
min: 0,
max:100
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: "Haha",
animation:true,
data: [52,119, 12],
lineWidth:4
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
Use plot lines for y-axis:
yAxis: {
...
plotLines: [{
color: 'red',
value: 100,
zIndex: 2
}]
}
Use gridLineColor for x-axis:
xAxis: {
...,
gridLineColor: 'blue'
}
Use gridLineColor for y-axis:
yAxis: {
gridLineColor: 'green',
...
}
Live demo: http://jsfiddle.net/BlackLabel/fm45ab3k/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
When trying to configure a polar chart in highcharts 7.2.0 I am unable to configure the chart to always show labels on the xAxis. When the chart is not a polar chart then configuration property of xAxis.labels.styles.textOverflow = 'none' works correctly. The jsfiddle below shows that labels on the xAxis will automatically be removed if they collide with another label. I am looking to configure the polar chart to do the same thing as the line chart. When chart.polar: true is removed you can see the line chart with labels that overlap each other.
https://jsfiddle.net/y6xor7ac/3/
Highcharts.chart('container', {
chart: {
// comment this line to show line graph working correctly
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
overflow: 'allow',
labels: {
style: {
textOverflow: 'none'
},
format: '{value}° super long text to make it overlap super long text to make it overlap super long text to make it overlap '
}
},
yAxis: {
min: 0,
overflow: 'allow',
stackLabels: {
allowOverlap: true
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
You can use internal allowOverlap property:
xAxis: {
...
labels: {
allowOverlap: true,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/1rkz9sfp/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
I have a sample highchart and I want to add the five text boxes with different colors at the bottom of the chart.
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Excellent',
data: [5, 3, 4, 1, 2]
}, {
name: 'Poor',
data: [2, 2, 9, 2, 1]
},
{
name: 'Fair',
data: [5, 3, 1, 7, 2]
}, {
name: 'Good',
data: [2, 2, 3, 6, 1]
}, {
name: 'Very good',
data: [3, 4, 8, 2, 5]
} ]
});
You can use the annotations module to add the text boxes:
annotations: [{
labelOptions: {
y: 0,
overflow: 'none',
shape: 'rect'
},
labels: [{
point: {
x: 50,
y: 280
},
backgroundColor: 'red',
text: 'some text'
}, {
point: {
x: 250,
y: 280
},
backgroundColor: 'blue',
text: 'some text'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4h0gp2qz/
API Reference: https://api.highcharts.com/highstock/annotations
I am trying to plot multiple column graphs on the same chart, stacked on each other. This is an example of desired output.
Each colored column segment represents percent of team to have reached a given level by the end of the given month. So it's like 4 separate column charts stacked. I think this is different than grouped and stacked, but may be mistaken.
Thanks for any feedback.
This can be done with a combination of stacked and column range. There are a few caveats with this in that you have to have a category for your yAxis which causes some funkiness with how you set your series' data values. I opted for one method and I am sure there are others. What I did was first set the chart type to 'columnrange':
chart: {
type: 'columnrange'
},
Then I set up the yAxis properties to use categories:
yAxis: {
categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
Since the offset of the category is in-between the tick marks of the axis I removed them and set the start position to not be on the tick:
startOnTick: false,
min: .5,
gridLineWidth: 0,
Up next I have to set the format of the labels (essentially just hiding the first label):
labels: {
formatter: function() {
var label = this.axis.defaultLabelFormatter.call(this);
if (!this.isFirst) {
return label;
}
}
},
Now I create plotLines to mimic the gridlines with the last one a different color to denote the "Target":
plotLines: [{
color: '#e6e6e6',
width: 1,
value: 1
}, {
color: '#e6e6e6',
width: 1,
value: 2
}, {
color: 'red',
width: 2,
value: 3,
label: {
text: 'Target'
}
}]
Now I setup the plotOptions for this chart. Note that the stacking parameter is not listed in the API as being part of the columnrange type but it still functions (as of this answer using v5.0):
plotOptions: {
columnrange: {
stacking: true
}
},
Okay, almost there. I then set up the series data:
series: [{
name: 's1',
data: [
[0, .64],
[0, .9],
[0, 1]
]
}, {
name: 's2',
data: [
[null, null],
[1, 1.1],
[1.0, 1.5]
]
}, {
name: 's3',
data: [
[null, null],
[null, null],
[2.0, 2.5]
]
}]
The important part of the data values is that each "level" is a whole integer such that Level 1 is from 0 to 1 and Level 2 is from 1 to 2 and Level 3 is from 2 to 3. This works out good as you try to determine your percentage in each level for each month as they are still in uniform increments.
I did not modify the tooltip as you gave no specs on that.
Sample jsFiddle and full code:
$(function() {
Highcharts.chart('container', {
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
startOnTick: false,
min: .5,
gridLineWidth: 0,
title: {
text: null
},
labels: {
formatter: function() {
var label = this.axis.defaultLabelFormatter.call(this);
if (!this.isFirst) {
return label;
}
}
},
plotLines: [{
color: '#e6e6e6',
width: 1,
value: 1
}, {
color: '#e6e6e6',
width: 1,
value: 2
}, {
color: 'red',
width: 2,
value: 3,
label: {
text: 'Target'
}
}]
},
plotOptions: {
columnrange: {
stacking: true
}
},
legend: {
enabled: true
},
series: [{
name: 's1',
data: [
[0, .64],
[0, .9],
[0, 1]
]
}, {
name: 's2',
data: [
[null, null],
[1, 1.1],
[1.0, 1.5]
]
}, {
name: 's3',
data: [
[null, null],
[null, null],
[2.0, 2.5]
]
}]
});
});
I am using Highcharts stacked bar chart, but not getting the lines at the end of values as it is in below image, can someone help me on this using Highcharts in built API or methods.
http://i.stack.imgur.com/y3AVm.png
create image and change the sun.png in js code.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'bar',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'bar',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'bar',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
data: [9, 8, 9, 19, 10],
lineWidth: 0,
enableMouseTracking: false,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>