I have spiderweb highchart with dynamically calculated x/y values and all labels of y-axis are displayed correctly except the last one. Did anyone have same problem?
function GenerateSpiderWebChart(conteinerId,categories,values, color) {
$('#'+conteinerId).highcharts({
chart: {
polar: true,
type: 'line',
margin: 0
},
colors: [
color
],
exporting: {
enabled: false,
buttons: {
enabled: false
}
},
title: {
text: ' ',
x: -80,
useHTML: true
},
pane: {
size: '70%'
},
xAxis: {
categories: categories,
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
align: 'center',
distance: 43
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
endOnTick: true
},
tooltip: {
shared: true,
headerFormat: '<span style="font-size: 12px">{point.key}:</span> <b>{point.y:,.2f}</b>',
pointFormat: '',
useHTML: true
},
legend: {
enabled: false,
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: '',
data: values,
pointPlacement: 'on'
}]
});
}
Set yAxis.showLastLabel to true. API says "Defaults to true." but it is not true in this case. Example: http://jsfiddle.net/02mssxy8/1/
showLastLabel: true
Related
Hi EveryOne I am using HighCharts library to plot charts , i want to achieve below pie chart i couldn't find proper example please help me on this.
You can enable sliced state for the blue point and use properties related with border:
series: [{
showInLegend: true,
allowPointSelect: true,
type: 'pie',
data: [{
y: 45,
color: 'black',
dataLabels: {
enabled: false
}
}, {
y: 55,
color: 'blue',
sliced: true,
borderWidth: 5,
borderColor: 'white',
dataLabels: {
format: '{point.y}%',
distance: -60,
style: {
fontSize: 24
}
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/gnqsuefw/
API Reference: https://api.highcharts.com/highcharts/series.pie.data.sliced
I created the extract pie for you here: https://jsfiddle.net/markwan/qm8xzr93/3/
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: "#f5f5f5",
backgroundColor: '#f5f5f5',
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
enabled: false
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemMarginBottom: 15,
x: 0,
y: 150
},
series: [{
name: 'Members',
colorByPoint: true,
data: [
{
name: 'Total Members: 1.000.000',
y: 450000,
color: "#393f4e",
borderWidth: 1,
borderColor: '#f5f5f5',
dataLabels: {
enabled: false,
}
},
{
name: 'Targeted Members: 550.000',
y: 550000,
sliced: true,
borderWidth: 15,
borderColor: 'white',
color: "#34b9d5",
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
distance: -70,
style: {
fontSize: 30
}
}
}]
}]
});
My chart was ok, I don't know what happened that the series name disappeared!
Maybe highcharts last updates need another options, or rtl causes problems.
My code: fiddle
What am I missing here?
$(function() {
$(document).ready(function() {
Highcharts.chart('user_info_46', {
chart: {
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: '',
useHTML: Highcharts.hasBidiBug,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
useHTML: true,
align: 'right',
rtl: true,
},
tooltip: {
useHTML: true,
align: 'right',
},
credits: {
enabled: false
},
series: [{
name: 'تعداد',
colorByPoint: true,
data: [{
name: 'آقا',
y: 7,
color: 'cornsilk'
}, {
name: 'خانم',
y: 2,
color: 'green'
}]
}]
});
});
});
The goal is to make a bar chart like this one in the picture showing the values in percentage but also in MillionTonnes:
The bars are representing the percentage value. The value of the million tonnes is just extra information. Both values can go at the end of the bar and the percentage should appear first and then the Million Tonnes value. Something like:
49% (49.6 Million Tonnes). How can I make this two values appear at the end of the bar? This is the code I have. TIA
Highcharts.chart('grafica1', {
chart: {
type: 'column',
inverted: true,
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ' '
},
xAxis: {
type: 'category',
labels: {
useHTML: true
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: null,
},
labels: {
enabled: false,
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '({point.y:.1f} Million tones)%'
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
inverted: false
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
}
}]
},
series: [{
name: 'Production',
colorByPoint: true,
data: [{
name: 'PACKAGING PAPERS<br>AND BOARDS',
y: 49,
color: '#005eb8',
}, {
name: 'CASE MATERIALS',
y: 29.9,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}, {
name: 'OTHER PACKAGING & PAPER',
y: 14.4,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}, {
name: 'WRAPPINGS',
y: 4.7,
color: '#fff',
borderWidth: 2,
borderColor: '#005eb8'
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafica1" class="chart1Slide2"></div>
When using the stacking option (Doc) it's possible.
Here a working fiddle
Is it possible to add an x-axis range selector to a Highcharts chart or is that functionality only built into Highstock?
Here's my code:
$('#graph').highcharts({
title: {
text: 'GRAPH TITLE',
margin: 25
},
xAxis: [{
categories: ['03/28','03/29','03/30','03/31','04/01','04/02','04/03','04/04','04/05','04/06','04/07','04/08','04/09']
}],
yAxis: {
title: {
enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min: 0
},
legend: {
layout: 'vertical',
borderWidth: 0,
enabled: false
},
series: [{
data: [27893,89070,90592,112166,68395,62448,39237,28439,21973,24064,56032,52854,38736]
}],
tooltip: {
enabled: false
},
plotOptions: {
area: {
dataLabels: {
enabled: true,
y: -5,
align: 'center'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'area'
}
});
Yes, it's possible, but rangeSelector works only with datetime axis.
Anyway, you will need valid Highstock license to enable rangeSelector, see FAQ.
I have a column chart combined with a line drawing across the chart.
When decreasing the width of the chart container to a value smaller than 357px the horizontal line is only drawn half way instead of the full width.
chart = new Highcharts.Chart({
chart: {
renderTo: 'chartcontainer',
defaultSeriesType: 'column',
borderRadius:0,
marginRight: 22,
marginBottom: 140
},
title: {
text: 'test norm',
align: 'left'
},
xAxis: [{
title: {
text: 'x',
style: {
}
},
categories: ['2008','2009','2010','2011','2012'],
labels: {
style: {
}
}
},
{ //secondary xAxis for range and norm values
gridLineWidth: 0,
labels:{
enabled:false
},
lineWidth:0,
tickWidth:0,
opposite: true,
minPadding:0,
maxPadding:0
}
],
yAxis: {
title: {
text: 'y',
style: {
}
},
labels: {
style: {
}
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom',
width:700,
borderRadius: 0,
shadow:false,
floating:true,
borderWidth: 0
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
borderRadius: 0,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: false,
style: {
font: 'bold 11px Arial, Verdana, sans-serif',
fontWeight: 'bold'
},
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>';
}
},
plotOptions: {
column: {
dataLabels: {
enabled: false
},
shadow: false
}
},
series: [{ name: 'A', shadow: false, data: [8,2,8,4,6] },{ name: 'B', shadow: false, data: [1,4,2,3,4] },{ name: 'C', shadow: false, data: [4,16,8,12,16] },{ name: 'E', shadow: false, data: [8,4,6,8,2] },{
type:'line',
name:'Norm',
data:[
{
y:10.000000,
x:0.000000,
dataLabels: {
enabled: false,
align: 'left',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
},
{
y:10.000000,
x:1.000000,
dataLabels: {
enabled: true,
align: 'right',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
}
],
color: '#01A1EB',
lineWidth:1,
dashStyle:'Solid',
shadow: {
opacity:0.1
},
enableMouseTracking:false,
marker:{enabled:false},
xAxis:1,
showInLegend: true
}]
});
See my jsfiddle example here:
The line fully drawn:
http://jsfiddle.net/ramon_ackermann/WwSbT/7/
The line only half way:
http://jsfiddle.net/ramon_ackermann/WwSbT/8/
Any ideas what might cause this?
Cheers.
Use Plotline on the y axis instead: http://jsfiddle.net/paranoir/WwSbT/9/
plotLines: [{
color: '#FF0000',
width: 1,
value: 10
}]
Plotline would be my preferred option as well.
If you need it to be a series for some reason, however, you can do it like this:
1) set your min x value for the line at -0.5, max x value at 4.5
2) set xAxis min at 0 and max at 4
3) forget about the secondary x axis
http://jsfiddle.net/jlbriggs/WwSbT/10/
for the x axis:
xAxis: [{
min:0,
max:4,
}]
and then in the data:
...
y:10.000000,
x:-0.5,
...
y:10.000000,
x:4.5,
The second x axis appears to be part of the problem. If you hide the norm series, and then reshow it, it fills the plot area properly.