How do I line up series points on a compare intervals graph? - highcharts
I am having this issue with both line and column graphs.
See fiddle http://jsfiddle.net/brookssh/tzhoka34/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chartContainer',
height: 595,
width: 1100,
type: '',
defaultSeriesType: 'spline',
backgroundColor: null,
reflow: false,
shadow: true,
marginLeft: 60,
spacingTop: 5,
marginTop: 70,
width: 1100,
spacingBottom: 100,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: "Daily Utility Demand Comparison",
style: {
color: '#484a4a',
fontSize: '22px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
subtitle: {
text: "<span style=\"color:#484a4a; font-weight:bold;\">Main Hydro - </span><br><span style=\"color:grey\">Tuesday, January 01 2013 12:00 AM and Wednesday, January 01 2014 12:00 AM</span>",
y: 36
},
xAxis: [{
title: {
text: 'Time',
style: {
color: '#0063A2',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%I:%M %p',
day: '%b %d',
month: '%B',
year: '%Y'
},
plotBands: []
}, {
labels: {
enabled: false
},
lineWidth: 0,
tickWidth: 0
}],
yAxis: {
title: {
text: 'Demand (kW)',
style: {
color: '#0063A2',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
plotLines: [{
value: 0,
width: 2,
color: '#000000'
}],
min: 0
},
tooltip: {
formatter: function () {
if (this.series.name == "Tuesday, January 01 2013 Demand|14657.85 kWh") var fontColor = "0063A2";
else var fontColor = "A21500";
return Highcharts.dateFormat('%A, %b %e, %Y - %I:%M %P : ', this.x) + '<b>' + Highcharts.numberFormat(this.y, 2) + ' kW' + '</b>';
}
},
plotOptions: {
spline: {
animation: {
duration: 1500
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
},
series: [{
name: "Tuesday, January 01 2013 Demand|14657.85 kWh",
zIndex: 2,
color: '#0063A2',
xAxis: 0,
data: [
[1356999300000, 430.20000],
[1357000200000, 414.00000],
[1357001100000, 410.40000],
[1357002000000, 414.00000],
[1357002900000, 421.20000],
[1357003800000, 417.60000],
[1357004700000, 410.40000],
[1357005600000, 412.20000],
[1357006500000, 408.60000],
[1357007400000, 408.60000],
[1357008300000, 406.80000],
[1357009200000, 403.20000],
[1357010100000, 408.60000],
[1357011000000, 410.40000],
[1357011900000, 408.60000],
[1357012800000, 423.00000],
[1357013700000, 419.40000],
[1357014600000, 405.00000],
[1357015500000, 414.00000],
[1357016400000, 415.80000],
[1357017300000, 518.40000],
[1357018200000, 511.20000],
[1357019100000, 550.80000],
[1357020000000, 541.80000],
[1357020900000, 640.80000],
[1357021800000, 646.20000],
[1357022700000, 685.80000],
[1357023600000, 693.00000],
[1357024500000, 714.60000],
[1357025400000, 723.60000],
[1357026300000, 727.20000],
[1357027200000, 727.20000],
[1357028100000, 747.00000],
[1357029000000, 730.80000],
[1357029900000, 738.00000],
[1357030800000, 739.80000],
[1357031700000, 730.80000],
[1357032600000, 732.60000],
[1357033500000, 723.60000],
[1357034400000, 725.40000],
[1357035300000, 730.80000],
[1357036200000, 729.00000],
[1357037100000, 732.60000],
[1357038000000, 729.00000],
[1357038900000, 727.20000],
[1357039800000, 730.80000],
[1357040700000, 729.00000],
[1357041600000, 730.80000],
[1357042500000, 730.80000],
[1357043400000, 738.00000],
[1357044300000, 727.20000],
[1357045200000, 730.80000],
[1357046100000, 723.60000],
[1357047000000, 725.40000],
[1357047900000, 732.60000],
[1357048800000, 725.40000],
[1357049700000, 729.00000],
[1357050600000, 730.80000],
[1357051500000, 734.40000],
[1357052400000, 730.80000],
[1357053300000, 732.60000],
[1357054200000, 727.20000],
[1357055100000, 736.20000],
[1357056000000, 732.60000],
[1357056900000, 729.00000],
[1357057800000, 732.60000],
[1357058700000, 730.80000],
[1357059600000, 736.20000],
[1357060500000, 747.00000],
[1357061400000, 730.80000],
[1357062300000, 730.80000],
[1357063200000, 750.60000],
[1357064100000, 714.60000],
[1357065000000, 702.00000],
[1357065900000, 703.80000],
[1357066800000, 714.60000],
[1357067700000, 613.80000],
[1357068600000, 586.80000],
[1357069500000, 583.20000],
[1357070400000, 579.60000],
[1357071300000, 558.00000],
[1357072200000, 558.00000],
[1357073100000, 552.60000],
[1357074000000, 554.40000],
[1357074900000, 538.20000],
[1357075800000, 516.60000],
[1357076700000, 513.00000],
[1357077600000, 523.80000],
[1357078500000, 518.40000],
[1357079400000, 516.60000],
[1357080300000, 518.40000],
[1357081200000, 514.80000],
[1357082100000, 464.40000],
[1357083000000, 448.20000],
[1357083900000, 453.60000],
[1357084800000, 459.00000]
]
}, {
name: "Wednesday, January 01 2014 Demand|12673.80 kWh",
zIndex: 1,
color: '#A21500',
xAxis: 1,
data: [
[1388535300000, 480.60000],
[1388536200000, 469.80000],
[1388537100000, 475.20000],
[1388538000000, 475.20000],
[1388538900000, 473.40000],
[1388539800000, 477.00000],
[1388540700000, 455.40000],
[1388541600000, 390.60000],
[1388542500000, 394.20000],
[1388543400000, 396.00000],
[1388544300000, 403.20000],
[1388545200000, 401.40000],
[1388546100000, 403.20000],
[1388547000000, 401.40000],
[1388547900000, 399.60000],
[1388548800000, 396.00000],
[1388549700000, 405.00000],
[1388550600000, 475.20000],
[1388551500000, 469.80000],
[1388552400000, 475.20000],
[1388553300000, 504.00000],
[1388554200000, 518.40000],
[1388555100000, 543.60000],
[1388556000000, 534.60000],
[1388556900000, 568.80000],
[1388557800000, 572.40000],
[1388558700000, 595.80000],
[1388559600000, 599.40000],
[1388560500000, 590.40000],
[1388561400000, 579.60000],
[1388562300000, 581.40000],
[1388563200000, 577.80000],
[1388564100000, 585.00000],
[1388565000000, 585.00000],
[1388565900000, 574.20000],
[1388566800000, 581.40000],
[1388567700000, 577.80000],
[1388568600000, 574.20000],
[1388569500000, 567.00000],
[1388570400000, 574.20000],
[1388571300000, 581.40000],
[1388572200000, 576.00000],
[1388573100000, 567.00000],
[1388574000000, 599.40000],
[1388574900000, 604.80000],
[1388575800000, 603.00000],
[1388576700000, 592.20000],
[1388577600000, 586.80000],
[1388578500000, 604.80000],
[1388579400000, 613.80000],
[1388580300000, 563.40000],
[1388581200000, 527.40000],
[1388582100000, 522.00000],
[1388583000000, 522.00000],
[1388583900000, 518.40000],
[1388584800000, 507.60000],
[1388585700000, 502.20000],
[1388586600000, 513.00000],
[1388587500000, 525.60000],
[1388588400000, 504.00000],
[1388589300000, 511.20000],
[1388590200000, 500.40000],
[1388591100000, 511.20000],
[1388592000000, 514.80000],
[1388592900000, 507.60000],
[1388593800000, 516.60000],
[1388594700000, 523.80000],
[1388595600000, 522.00000],
[1388596500000, 543.60000],
[1388597400000, 601.20000],
[1388598300000, 597.60000],
[1388599200000, 588.60000],
[1388600100000, 576.00000],
[1388601000000, 588.60000],
[1388601900000, 597.60000],
[1388602800000, 595.80000],
[1388603700000, 554.40000],
[1388604600000, 556.20000],
[1388605500000, 559.80000],
[1388606400000, 558.00000],
[1388607300000, 554.40000],
[1388608200000, 554.40000],
[1388609100000, 541.80000],
[1388610000000, 545.40000],
[1388610900000, 536.40000],
[1388611800000, 529.20000],
[1388612700000, 527.40000],
[1388613600000, 527.40000],
[1388614500000, 534.60000],
[1388615400000, 534.60000],
[1388616300000, 534.60000],
[1388617200000, 525.60000],
[1388618100000, 496.80000],
[1388619000000, 493.20000],
[1388619900000, 495.00000],
[1388620800000, 502.20000]
]
}]
});
You have not specified a type for your second xAxis. This causes it to default to linear and not line up with your first xAxis which is datetime.
Just add type: 'datetime' to your second x-axis and the series should line up, since you already have the points equally spaced out in the two series.
See this updated JSFiddle of how it looks.
Related
how to highcharts code new for local to set the values for stacked column
how to highcharts code new for local to set the values for stacked columnhow to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column
public options: any = {
title: {
text: 'Sales of petroleum products March, Norway',
align: 'left'
},
xAxis: {
categories: ['Jet fuel', 'Duty-free diesel', 'Petrol', 'Diesel', 'Gas oil']
},
yAxis: {
title: {
text: 'Million liter'
}
},
labels: {
items: [{
html: 'Total liter',
style: {
left: '50px',
top: '18px',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'percent' // normal or percent
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: [{
type: 'column',
name: '2020',
data: [59, 83, 65, 228, 184]
}, {
type: 'column',
name: '2021',
data: [24, 79, 72, 240, 167]
}, {
type: 'column',
name: '2022',
data: [58, 88, 75, 250, 176]
}, {
type: 'spline',
name: 'Average',
data: [47, 83.33, 70.66, 239.33, 175.66],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
};
public options1: any = {
chart: {
zoomType: 'xy'
},
colors: ['#7cb5ec', '#91e8e1', '#90ed7d'],
title: {
text: 'Something '
},
subtitle: {
text: 'subsomething'
},
xAxis: [{
categories: ['1/1','2/1','3/1','4/1', '5/1', '6/1','7/1','8/1','9/1','10/1','11/1', '12/1', '13/1', '14/1', '15/1']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: 0,
max:100,
title: {
text: 'Percent',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'sample',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 100,
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0],
display:'none'
}
},
opposite: true
}],
tooltip: {
shared: false
},
legend: {
layout: 'vertical',
align: 'center',
x: -0,
verticalAlign: 'top',
y: 400,
floating: true,
// backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [
{
name: 'suff1',
type: 'column',
yAxis: 1,
data: [10, 25, 10,30,80, 20, 25, 10,30,80, 20, 25, 10,30,80],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'suff2',
type: 'column',
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
data: [20, 50, 30,30,10, 30, 50, 30,30,10, 30, 50, 30,30,10]
}, {
name: 'suff3',
yAxis: 1,
type: 'column',
tooltip: {
valueSuffix: ' %'
},
data: [30,5, 60, 40, 10, 50,25, 60, 40, 10, 50,25, 60, 40, 10]
},
{
name: 'NS',
type: 'spline',
data: [45,55,74,85,81, 45,55,74,85,81, 45,55,74,85,81],
tooltip: {
valueSuffix: '%'
}
}]
};
Highcharts.chart('container-nps', this.options);
import * as Highcharts from 'highcharts';
<div id="container-nps"></div>
Highcharts - Tree map rectangles are showing the next level
I am using Highcharts Treemap and I want to prevent from showing the next level in every level of the treemap.
I want that every object on the treemap will be with only one color.
Here is my code:
Highcharts.chart('myChart', {
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5,
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: result
}],
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
}
})
Thanks In Advance.
Setting opacity to 0 for the series seems to be fixing your problem.
Demo: http://jsfiddle.net/qa2czu8y/
$(function() {
Highcharts.chart('container', {
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3,
}],
opacity: 0,
data: [{
id: 'A',
name: 'Apples'
}, {
id: 'B',
name: 'Bananas'
}, {
id: 'O',
name: 'Oranges'
}, {
name: 'Anne',
parent: 'A',
value: 5,
colorValue: 5
}, {
name: 'Rick',
parent: 'A',
value: 3,
colorValue: 3
}, {
name: 'Peter',
parent: 'A',
value: 4,
colorValue: 4
}, {
name: 'Anne',
parent: 'B',
value: 4,
colorValue: 4
}, {
name: 'Rick',
parent: 'B',
value: 10,
colorValue: 10
}, {
name: 'Peter',
parent: 'B',
value: 1,
colorValue: 1
}, {
name: 'Anne',
parent: 'O',
value: 1,
colorValue: 1
}, {
name: 'Rick',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Peter',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
colorValue: 2
}]
}],
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
how to create a responsive custom label in highchart
I create a scatter chart and will add a label on a box that has been specified, I've managed to make his label, but when her screen minimized, do not adjust the position of its labels.
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
and my complete code is
$('#ketenagalistrikan-pembenahan-layanan-chart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Pembenahan Dimensi Layanan'
},
subtitle: {
text: 'Source: rad-research.com'
},
labels: {
items : [
{
html : 'Prioritas 4',
style : {
left : '380%',
top : '60px',
fontSize : '10px'
}
},
{
html : 'Prioritas 3',
style : {
left : '660%',
top : '60px',
fontSize : '10px'
}
}
]
},
xAxis: {
title: {
enabled: true,
text: 'Kepentingan'
},
min: -0.5,
max: 39.3,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 12.7,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 26,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 39.3,
zIndex: 3
}]
},
yAxis: {
title: {
text: 'Kepuasan'
},
tickInterval: 8.9,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 46.2,
zIndex: 3
},{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 55.2,
zIndex: 3
}]
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Marketing',
data: [[8.75, 45.8]]
},{
name: 'Sales',
data: [[15.0, 43.6]]
},{
name: 'Aktivasi/Instalasi',
data: [[-0.3, 53.2]]
},{
name: 'Contact Center',
data: [[1, 52.2]]
},{
name: 'Customer Account',
data: [[-0.3, 60.1]]
},{
name: 'Field Support',
data: [[30.5, 40.3]]
},{
name: 'Billing',
data: [[37.5, 59.2]]
}]
});
Labels in this case are static, so unless you manually redraw them they will will not be responsive.
I prefer another way - you can use renderer and have control rendered objects completely. With the help axis.toPixels() method you can easily make them responsive and stays in the fixed value.
Create item on load event:
load: function () {
this.customTexts = [];
var text = this.renderer.text(
'Responsive text',
this.xAxis[0].toPixels(15),
this.yAxis[0].toPixels(50)
)
.css({
fontSize: '10px'
})
.add();
this.customTexts.push(text);
},
Redraw the item on redraw event:
redraw: function () {
this.customTexts[0].attr({
x: this.xAxis[0].toPixels(15),
y: this.yAxis[0].toPixels(50)
});
}
Example: http://jsfiddle.net/hfev4w7c/
Highchart data series on wrong y-axis
I am struggling to solve this issue where I have a Highcharts graph with temperature and humidity.
It has two y-axis, one for temperature and one for humidity.
I have specified that humidity should go to the y-axis id 1, but it does not.
It puts the line in, but it is 'plotted' to the temperature axis values.
See this jsfiddle
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
type: 'spline'
},
title: {
text: 'Temperatures - Vdrivhus'
},
subtitle: {
text: 'last hour'
},
xAxis: {
type: 'datetime',
// dateTimeLabelFormats.setOption("minute", "%H:%M");
dateTimeLabelFormats: { // don't display the dummy year
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Humidity',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
min: 50,
max: 100,
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
// Define the data points.
marker: {
enabled: false
},
yaxis: 0,
tooltip: {
valueSuffix: '°C'
},
data: [
[1387521917000, 5],
[1387522299000, 5.2],
[1387522531000, 5.1],
[1387522809000, 5.1],
[1387523536000, 4.8],
[1387523745000, 4.7],
[1387524008000, 4.7],
[1387524303000, 4.8],
[1387524667000, 4.9],
[1387524904000, 4.9],
[1387525245000, 5]
]
}, {
name: 'Humidity',
marker: {
enabled: false
},
yaxis: 1,
tooltip: {
valueSuffix: '%'
},
data: [
[1387521917000, 74.4],
[1387522299000, 73.6],
[1387522531000, 74],
[1387522809000, 74],
[1387523536000, 82.5],
[1387523745000, 82.4],
[1387524008000, 78.7],
[1387524303000, 75.9],
[1387524667000, 74.6],
[1387524904000, 74.5],
[1387525245000, 74.2]
]
}, ]
});
});
//]]>
Can anyone help me solve this?
It is very simple, yaxis option should be yAxis since JS is case-sensitive. I think that's it: jsFiddle
How to remove the gap between yAxis and data?
I'm styling up a Highchart to match an existing design. I'm however left with a gap between the yAxis and the start of the data. See the example: http://jsfiddle.net/MDGkd/
How can I get the xAxis to start on the yAxis?
var colors = ['#77217b', '#9c50b1', '#e1d0e6', '#f5f0f7', '#f1e9f4'];
$(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
marginLeft: 80,
marginBottom: 80
},
colors: colors,
legend: {
borderRadius: 0,
borderWidth: 0,
itemStyle: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '16px'
}
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region',
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontWeight: 'bold',
fontSize: '20px'
},
margin: 45
},
subtitle: {
text: 'Source: Wikipedia.org',
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '16px'
},
y: 40
},
xAxis: {
startOnTick: true,
min: 0,
max: 6,
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
lineColor: '#000000',
tickmarkPlacement: 'on',
tickLength: 14,
tickWidth: 1,
tickColor: '#000000',
title: {
enabled: false
},
labels: {
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '12px'
},
align: 'left',
x: -3,
y: 26
}
},
yAxis: {
lineColor: '#000000',
lineWidth: 1,
tickLength: 24,
tickWidth: 1,
tickColor: '#000000',
gridLineWidth: 1,
gridLineColor: '#e8d4ec',
title: {
text: 'Percent',
style: {
fontFamily: 'Helvetica',
color: '#000000'
},
x: -40
},
labels: {
style: {
fontFamily: 'Helvetica',
color: '#000000',
fontSize: '12px'
},
align: 'left',
x: -24,
y: 16
}
},
tooltip: {
backgroundColor: '#000000',
borderRadius: 0,
borderWidth: 0,
shadow: false,
style: {
fontFamily: 'Helvetica',
color: '#ffffff',
fontSize: '11px'
},
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': <b>' + Highcharts.numberFormat(point.percentage, 1) + '%</b> (' + point.y + 'millions)';
});
return s;
},
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#8f3ba7',
lineWidth: 2,
marker: {
lineWidth: 0,
lineColor: null,
fillColor: '#000000',
symbol: 'circle'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}]
});
$.each(chart.series, function (i, val) {
console.log(i, colors[i]);
this.legendSymbol.attr('rx', 0);
this.legendSymbol.attr('ry', 0);
this.legendSymbol.attr('width', 16);
this.legendSymbol.attr('height', 16);
this.legendSymbol.attr('y', 5);
this.legendSymbol.attr('fill', colors[i]);
});
console.log(chart);
});
You want it to look like this?
I achieved this by adjusting the startOnTick and min values.
xAxis: {
startOnTick: false,
min: 0.5,
Fiddle here.