I'm newbie to highchart and I've got a demo for polar chart using highcharts
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area'
},
accessibility: {
description: 'ASDFR'
},
title: {
text: '',
x: -120
},
pane: {
size: '100%',
startAngle:-42
},
xAxis: {
categories: ['ATT', 'TEC', 'TAC', 'DEF', 'CRE'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels:{
formatter: function(){
return this.value + '???'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name} <b>{point.y:,.0f}</b></span>'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
series: [{
name: '',
data: [73, 80, 80, 54, 92],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
pane: {
size: '70%'
}
}
}]
}
});
How can I show the value of the series right in the xAxis label e.g ATT 73, TEC 80, TAC 80...
You can get the associated value through series data. Example:
xAxis: {
...,
labels: {
formatter: function() {
return this.value + ' ' + this.chart.series[0].yData[this.pos];
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/pyohzk8c/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Related
I have a stacked column/scatter chart with some dataLabels off to one side. The issue I am facing is that when my two markers begin to get close to one another, their dataLabels overlap
I need to always show both labels, so is there a way to detect when labels are overlapping and move the bottom one down by adjusting its y value based on how much overlap there is?
sample fiddle of the issue
Highcharts.chart('container', {
chart: {
type: 'column',
width: 500
},
title: {
text: 'Stacked column chart'
},
xAxis: {
visible: false,
},
yAxis: {
min: 0,
visible: false,
title: {
},
},
legend: {
layout:"vertical",
align: "right",
verticalAlign: "bottom",
itemMarginTop: 15,
y: -10,
x: -50
},
tooltip: {
enabled: false,
},
plotOptions: {
scatter: {
marker: {
symbol: "triangle",
},
dataLabels: {
enabled: true,
x: -80,
y: 50,
allowOverlap: true,
useHTML: true,
}
},
column: {
pointWidth: 70,
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
name: '',
data: [100],
color: "#ededed"
}, {
name: '',
data: [500]
}, {
name: '',
data: [400]
},
{
type: "scatter",
data: [1000],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>Your goal of <br/>$"+ this.y +"<br/>text</div>"
},
}
},
{
type: "scatter",
data: [900],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>You are here <br/>$"+ this.y +"<br/>text</div>"
},
}
}]
});
You can correct data-labels positions by using the attr method on their SVG elements.
For example:
chart: {
events: {
render: function() {
const series = this.series;
const dl1 = series[3].points[0].dataLabel;
const dl2 = series[4].points[0].dataLabel;
if (dl1.y + dl1.height > dl2.y) {
dl2.attr({
y: dl1.y + dl1.height
});
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5Lmh4owb/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement.html#attr
https://api.highcharts.com/highcharts/chart.events.render
I have the following chart and I would like to increase the distance between y axis labels and the chart (light blue lines) - check the image, more distance between 10k and the blue lines
In y axis I tried to combine the settings of yAxis offset, yAxis labels padding and yAxis title margin, but no success
How do I achieve this?
These are the settings of the chart
options: {
chart: {
updateArgs: [false, false, true],
borderWidth: 1,
marginLeft: 40,
marginRight: 2,
type:'line',
zoomType: 'x',
animation: false,
height:250,
title: {
text: ''
},
panning:true
},
title: {
text: ''
},
time:{
useUTC:true
},
credits:{
enabled:false
},
tooltip: {
shared: true,
formatter: this.tooltipFormatter
},
title:{
text:null
},
lang: {
noData: 'loading...'
},
rangeSelector: {
inputEnabled: false
},
xAxis:{
type:'datetime',
max:this.maxdate,
min:this.mindate,
title:
{
align:'high'
},
labels: {
padding: 50,
format: '{value:%H:%M}',
style: {
fontSize: '10px'
}
},
crosshair: {
enabled: true,
width: 1,
color: '#000'
},
events : {
afterSetExtremes : this.afterSetExtremes
}
},
yAxis: {
title: {
text: this.streamChart.title + ' [' + this.streamChart.unit+']',
margin:20,
fontSize:"15px"
},
labels: {
step: 2,
staggerLines: 2,
enabled:true,
align: 'left',
padding:0
},
alignTicks:'left',
textAlign:'left',
align:'middle',
opposite:false,
offset:0
},
plotOptions: {
series: {
animation: false,
boostThreshold: 1,
pointInterval: 3600 * 1000
}
},
legend: {
enabled: false
},
responsive: {
rules: [{
condition: {
maxWidth: '100%',
minHeight: 300
},
chartOptions: {
subtitle: {
text: null
},
navigator: {
enabled: false
},
legend: {
enabled: false
},
yAxis: {
title: {
enabled: false
}
}
}
}]
}
,series: [{
name:this.streamChart.title,
id:this.streamChart.id,
data:[]
}],
},
Increase chart.marginLeft and enable reserveSpace or align labels by x property:
labels: {
...,
reserveSpace: true
}
Live demo: http://jsfiddle.net/BlackLabel/71gxj4sd/
API Reference:
https://api.highcharts.com/highcharts/yAxis.labels.reserveSpace
https://api.highcharts.com/highcharts/yAxis.labels.x
Here is a sample fiddle (1) that shows the series name along the line body
(Sessions, Users). How do I make similar label for a highstock chart?
(The label seems to be appearing due to the data module that does the csv processing)
(1) https://jsfiddle.net/4restw8a/9/
Highcharts.chart('container', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
data: {
csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
'057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
beforeParse: function (csv) {
return csv.replace(/\n\n/g, '\n');
}
},
title: {
text: 'Daily sessions at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' sessions',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All sessions',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New users'
}]
});
This comes from the series label module, which you can use by including series-label.js:
<script src="https://code.highcharts.com/modules/series-label.js"></script>
See this JSFiddle example of a Highstock chart with it included.
See this API documentation for its settings.
I have a chart with to series of data for a bunch of categories, every category only have values for one of the series:
The problem is that the bars don't start in the center of the category but on the begin or end, depending if its in first or the second series.
Is there a way to start the bar in center?
Example: http://jsfiddle.net/ms1kfrox/
Chart settings:
{
chart: {
type: 'bar'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
padding: 0,
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Type1',
data: [null, {
y: 870
},
null, {
y: 408
},
null
]
}, {
name: 'Type2',
data: [{
y: 973
},
null, {
y: 680
},
null, {
y: 34
}
]
}]
}
You can set grouping:false in plotOptions / bar object.
Example: http://jsfiddle.net/ms1kfrox/1/
I want to reduce space between bar chart series data. Below mentioned is the image which gives a clear picture :
Can anyone suggest the best approach to do it?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635],
pointWidth: 22,
}, {
name: 'Year 1900',
data: [133, 156, 947],
pointWidth: 22
}]
});
});
http://jsfiddle.net/fMdk3/5/
The options you want to play with are pointPadding (padding between bars) and groupPadding (padding between seies).
e.g.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.1,
}
},
e.g. http://jsfiddle.net/BZzWQ/