Highcharts Categories don't add

Highcharts Categories don't add - javascript

I want to show number '6' category but data in series are steady like that. Yet what happened is that only 1 - 5 are showed in category. How will I do this? Please see code below:
function getchart()
{
$('#container').highcharts({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: 'Daily Events',
style: {
'color': '#06F',
'font-family': 'Roboto',
'font-size': '16px',
'font-weight': 'bold'
},
useHTML: true
},
xAxis: {
categories: [
'1',
'2',
'3',
'4',
'5',
'6'
]
},
yAxis: {
min: 0,
title: {
text: 'No. of Events'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
itemStyle: {
'color': '#666',
'font-family': 'Roboto',
'font-weight': 'normal',
'font-size': '11px'
},
useHTML: true
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
plotOptions: {
column: {
pointWidth: 30,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'Incoming',
data: [
{y: 10.4, color: '#FAA961'}, //incoming
{y: 15.4, color: '#FAA961'},
{y: 20.4, color: '#FAA961'},
{y: 12.4, color: '#FAA961'},
{y: 30.4, color: '#FAA961'},
],
color: '#FAA961'
}, {
name: 'Ongoing',
data: [
{y: 10.4, color: '#438EF7'}, //incoming
{y: 15.4, color: '#438EF7'},
{y: 20.4, color: '#438EF7'},
{y: 12.4, color: '#438EF7'},
{y: 30.4, color: '#438EF7'},
],
color: '#438EF7'
}, {
name: 'Finished',
data: [
{y: 34.4, color: '#43F752'}, //incoming
{y: 35.4, color: '#43F752'},
{y: 40.4, color: '#43F752'},
{y: 42.4, color: '#43F752'},
{y: 20.4, color: '#43F752'},
],
color: '#43F752'
}]
});
}

You can use 'min' and 'max' values for x-axis to specify the minimum and maximum index value from category array to be displayed on chart.
In your case,
min: 0,
max: 5
Here is the updated fiddle.

Related

Highcharts not working in ie 11

Please don't say question already asked. I searched alot but faild.
The charts displaying perfectly in chrome, Firefox, and edge but not displaying in IE 11 and less.
here is my code
Highcharts.chart('teledensity', {
chart: {
type: 'line'
},
colors: [graph_data.series_color_one,graph_data.series_color_two,graph_data.series_color_three],
title: {
text: 'title'
},
credits:{
enabled:false
},
xAxis: {
type: 'category',
labels: {
autoRotation: [0],
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
},
categories: graph_categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'title of y-axis'
},
stackLabels: {
enabled: true,
formatter: function(){
// var val = this.total;
// return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
legend: {
align: 'center',
x: 20,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
// borderColor: '#CCC',
// borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}',
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function(){
var val = this.y;
return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
treshold: 1
}
},
series: [{
name: 'series one',
data: ['1','2','3'],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: ['1','2','3'],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: ['1','2','3'],
marker: {
symbol: 'square'
},
}]
});

The problem was with the series you had given. I just changed your series as following.
series: [{
name: 'series one',
data: [1,2,3],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: [4,5,6],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: [7,8,9],
marker: {
symbol: 'square'
},
}]
You can see that, you were given the data as a string data: ['1','2','3']. You can see the updated jsFiddle here.
Note: If jsFiddle is not loading in your IE browser, please try using draft version of jsFiddle.
I would also recommend you to style your container div, in your case teledensity with some height.
#teledensity {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
Highcharts.chart('teledensity', {
chart: {
type: 'line'
},
title: {
text: 'title'
},
credits:{
enabled:false
},
xAxis: {
type: 'category',
labels: {
autoRotation: [0],
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
},
categories: ['2015','2016','2017'],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'title of y-axis'
},
stackLabels: {
enabled: true,
formatter: function(){
// var val = this.total;
// return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
legend: {
align: 'center',
x: 20,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
// borderColor: '#CCC',
// borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}',
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function(){
var val = this.y;
return (val/1000000).toFixed(2);
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
treshold: 1
}
},
series: [{
name: 'series one',
data: [1,2,3],
marker: {
lineWidth: 2,
lineColor: '#000',
fillColor: 'white'
}
}, {
name: 'series two',
data: [4,5,6],
marker: {
symbol: 'square'
},
}, {
name: 'series three',
data: [7,8,9],
marker: {
symbol: 'square'
},
}]
});
#teledensity {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<div id="teledensity"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

Solved...!
As I was creating graph dynamically and I used .map() which is ES6 not supported by IE11 so I modify code
From
graph_series_data_one = series_data_one ?>.reverse().map(x => parseFloat(x));
graph_series_data_two = series_data_two ?>.reverse().map(x => parseFloat(x));
To
graph_series_data_one = series_data_one ?>.reverse().map(function (x) { return parseFloat(x); });
graph_series_data_two = series_data_two ?>.reverse().map(function (x) { return parseFloat(x); });
and it worked.
Thanks.

Always showing tooltip on all columns in Highcharts

Here's a column chart - https://jsfiddle.net/kx8qqh2e/
When you hover on a column, it shows a nice tooltip. I want to show the tooltips on all the columns at all times without having the user to hover over them. How can I achieve this?
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
series: [
{
colorByPoint: true,
data: [
{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}
]
}
]
};
$('#categorywise-apf-graph').highcharts(chart_data);

For the sake of clarity and posterity:
You can turn off the standard tooltip, and use the dataLabels to accomplish your goal.
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
By default, a small label with the y value of the column will be placed above the column.
You can use the extensive configuration options, and the formatter function, to customize this label in a wide variety of ways, making it more like the standard tooltip
Example of a highly customized version of the dataLabel:
Code:
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(0,0,0,0.8)',
borderColor: 'rgba(0,0,0,0.9)',
color: 'rgba(255,255,255,0.75)',
borderWidth: .5,
borderRadius: 5,
y: -10,
style: {
fontFamily: 'Helvetica, sans-serif',
fontSize: '10px',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<strong>'+this.series.name+'</strong>'
+'<br/>Group: <strong>'+ this.x+'</strong>'
+'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
}
}
}
},
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/
Output:
[{ EDIT --
And, since having big labels like this can be distracting when what you really want to do is just see the data plotted, here's a version with a button to toggle the visibility of the labels:
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/4/
Code:
<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
var enabled = chart.series[0].options.dataLabels.enabled;
console.log(enabled);
chart.series[0].update({ dataLabels: { enabled: !enabled }});
});
-- /EDIT }]

Hopefully This Fiddle answers your question.
The effect you want was achieved by using the plotOptionsAPI link here directive in highcharts.
$(document).ready(function() {
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}]
}]
};
$('#categorywise-apf-graph').highcharts(chart_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>

Highcharts - Same chart multiple times in same page

How can I use, multiple charts in same page with same data?
I am trying like below, but only getting first chart working
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>
$(function () {
// Everything in common between the charts
var commonOptions = {
colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
labels: {
style:{ color: '#bbb' }
},
lineColor: '#e4e4e4',
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' }
},
tickInterval: 100,
lineColor: '#e4e4e4',
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
backgroundColor: "rgba(0 ,0, 0, 0.5)",
}],
// Area Chart
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 1,
fillOpacity: 0.1,
marker: {
lineWidth: 1.5,
symbol: 'circle',
fillColor: 'white',
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
$('.areaChartTwoWay').highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Days', },
text: 'Date',
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Legend 2',
lineColor: '#fb8b4b',
marker: { lineColor: '#fb8b4b', fillColor: 'white', },
data: [150, 105, 130, 160, 185, 280, 185, 160, 135, 200],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Legend 1',
lineColor: '#99cc03',
marker: { lineColor: '#99cc03', fillColor: 'white', },
data: [82, 68, 90, 69, 75, 62, 46, 36, 79, 34],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}));
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>

Try to move call of highchart in each(..) like this one:
$(function () {
// Everything in common between the charts
var commonOptions = {
colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
labels: {
style:{ color: '#bbb' }
},
lineColor: '#e4e4e4',
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' }
},
tickInterval: 100,
lineColor: '#e4e4e4',
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
backgroundColor: "rgba(0 ,0, 0, 0.5)",
}],
// Area Chart
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 1,
fillOpacity: 0.1,
marker: {
lineWidth: 1.5,
symbol: 'circle',
fillColor: 'white',
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
$('.areaChartTwoWay').each(function() {
$(this).highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Days', },
text: 'Date',
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Legend 2',
lineColor: '#fb8b4b',
marker: { lineColor: '#fb8b4b', fillColor: 'white', },
data: [150, 105, 130, 160, 185, 280, 185, 160, 135, 200],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Legend 1',
lineColor: '#99cc03',
marker: { lineColor: '#99cc03', fillColor: 'white', },
data: [82, 68, 90, 69, 75, 62, 46, 36, 79, 34],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}))});
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>

Highcharts - label placement for categorized y-axis

I have a chart comparing boolean data for two people over a number of years.
The jsfiddle below represents what I need except that I need the labels on the bottom axis to be aligned with the centre of the red and green blocks and to not have the 5 appear on the rightmost tick.
http://jsfiddle.net/zzella/Xa46f/3/
Anybody have any ideas how to achieve this for the above chart, or perhaps a better way to structure the data so as to obtain the results I need?
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'bar'
},
title: {
text: 'Action completed for year (Yes/No)'
},
xAxis: {
categories: ['Person 1', 'Person 2'],
labels: {
align: 'left',
style: {
fontSize: '13px',
fontFamily: 'Arial'
},
y: -45,
x: 60
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
},
yAxis: {
type: 'category',
categories: ["2010","2011","2012","2013", "2014"],
title: false,
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
gridLineColor: '#FFFFFF',
},
legend: false,
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
},
formatter: function () {
console.log(this);
return this.key
}
},
},
},
series: [{
name: '2014',
data: [{
name: "2014: no",
color: "#a50000",
y: 1
}, {
name: "2014: yes",
color: "#006500",
y: 1
}],
}, {
name: '2013',
data: [{
name: "2013: yes",
color: "#006500",
y: 1
}, {
name: "2013: yes",
color: "#006500",
y: 1
}]
}, {
name: '2012',
data: [{
name: "2012: yes",
color: "#006500",
y: 1
}, {
name: "2012: no",
color: "#a50000",
y: 1
}]
}, {
name: '2011',
data: [{
name: "2011: no",
color: "#a50000",
y: 1
}, {
name: "2011: yes",
color: "#006500",
y: 1
}]
}, {
name: '2010',
data: [{
name: "2010: no",
color: "#a50000",
y: 1
}, {
name: "2010: no",
color: "#a50000",
y: 1
}]
}]
});
});

One wait to attain this is by adding a label format to your yAxis, like you did to your xAxis. If you add labels: { x: 40 }, the labels will center along the boxes.
To get rid of the random 5, you can do showLastLabel: false.
Here is the final yAxis that does what you described:
yAxis: {
type: 'category',
categories: ["2010","2011","2012","2013", "2014"],
title: false,
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
gridLineColor: '#FFFFFF',
labels: {
x: 40
},
showLastLabel: false
},
Link to the Fiddle.

How to make x-axis tickmarks span the entire bar chart?

I'm using Highcharts to create a bar chart. I need this bar chart to eventually look like the chart below, with the x-axis tickmarks spanning the entire width of the chart:
With my current code, the chart looks like this:
Any ideas on how to make this happen?
Here is a fiddle with my current code.
And the actual code:
HTML:
<div id="q2-bar" class="chart">
</div>
JS:
$('#q2-bar').highcharts({
chart: {
type: 'bar',
backgroundColor:'transparent'
},
title: {
text: ''
},
xAxis: {
categories: ['Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label'],
title: {
text: null
},
tickLength: 500,
lineColor: 'transparent',
labels: {
style: {
color: '#ffffff'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
overflow: 'justify',
enabled: false
},
gridLineColor: 'transpartent',
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
format: '{y}%',
color: '#ffffff'
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Expenses Covered',
borderWidth: '0',
data: [{
y: 46,
color: '#d70081'
},{
y: 52,
color: '#0099cc'
},{
y: 73,
color: '#75ad01'
},{
y: 47,
color: '#ffcc00'
},{
y: 64,
color: '#ff6600'
},{
y: 60,
color: '#663399'
},{
y: 42,
color: '#00b99c'
},{
y: 51,
color: '#ff0033'
},{
y: 51,
color: '#0099cc'
},{
y: 60,
color: '#d70081'
},{
y: 81,
color: '#ffcc00'
}]
}]
});
Thanks!

Set a 'gridLineWidth' and 'gridLineColor' in the x-axis.
xAxis: {
categories: ['Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label'],
title: {
text: null
},
tickLength: 500,
lineColor: 'transparent',
labels: {
style: {
color: '#ffffff'
}
},
gridLineWidth:'1px',
gridLineColor:'#FFFFFF'
},

Develop Reference

JavaScript is the programming language of the Web.

Highcharts Categories don't add - javascript

You can use 'min' and 'max' values for x-axis to specify the minimum and maximum index value from category array to be displayed on chart. In your case, min: 0, max: 5 Here is the updated fiddle.

Related

Highcharts not working in ie 11

Always showing tooltip on all columns in Highcharts

Highcharts - Same chart multiple times in same page

Highcharts - label placement for categorized y-axis

How to make x-axis tickmarks span the entire bar chart?

Categories

Resources