Develop Reference

Too many categories to display on column chart with vue-apexchart

i have a big data set to display ( around 150 category) with a library named vue-apexchart my problem is that i cant find a way to make the graph scrollable on xaxis without having a broken display the following image will explain my problem better
as you can see having too many categories leads to an unreadable chart
can you please help me
i have tried to make a scrollable div, the probleme still remains ( unreadable xaxis )
here's my chartOptions object :
chartOptions: {
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
xaxis: {
categories: [],
},
fill: {
opacity: 1,
},
},

I think there are two strategies that you could adopt here. In my opinion, the second one is better.
1. Horizontal bar chart
If you do not have strict constraints in terms of UX/UI, a possible solution might be to switch both axes...
plotOptions: {
bar: {
horizontal: true
}
},
... and give your chart much more height:
chart: {
type: 'bar',
height: 2500,
},
Doing that would allow you to use the natural vertical scrolling of your browser.
let data = [];
for (let i = 1; i <= 150; i++) {
data.push({x: `Category ${i}`, y: i});
}
let options = {
series: [{
name: 'Series',
data
}],
chart: {
type: 'bar',
height: 2500
},
yaxis: {
labels: {
style: {
fontSize: '10px'
},
offsetY: 3
}
},
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
enabled: false
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
All categories are visible. This is not very handy, though.
2. Zoom, pan and tick settings
Zooming and panning are useful features. They are available by default in the toolbar, but this toolbar does not appear immediately when your xaxis has categories. To enable the toolbar in this case, you have to change xaxis.tickPlacement from 'between' to 'on' (see Zoom on Category Bar Charts – ApexCharts.js).
Since you have a lot of categories, it is also a good idea to limit the number of visible labels with xaxis.tickAmount.
xaxis: {
tickPlacement: 'on',
tickAmount: 25
},
Thanks to the zoomX() method, you can decide to display your chart with only a subset of your data. The rest is still accessible via zooming and/or panning.
let data = [];
for (let i = 1; i <= 150; i++) {
data.push({x: `Category ${i}`, y: i});
}
let options = {
series: [{
name: 'Series',
data
}],
chart: {
type: 'bar',
height: 350
},
xaxis: {
tickPlacement: 'on',
tickAmount: 25
},
dataLabels: {
enabled: false
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
chart.zoomX(37, 71);
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

HighStocks/HighCharts scrollbar not displaying with large datasets causing xAxis labels to disappear and making bars not show

I'm creating a HighStock column bar chart. I have enabled the scrollbar using scrollbar: enabled. The scrollbar works fine for smaller datasets, but this dataset has a lot of categories(I've only included half as many as I need). For some reason, after a certain number, the rects for the bar chart won't properly show(or show wrong values) and the xAxis labels display as numbers rather than their actual names. Also, I'm trying to add IDs to each of the bars to add click events, but it only adds IDs to bars that are properly rendered initially. I have also noticed that I can properly add IDs even with a scrollbar to smaller data sets because all of the rect elements are properly rendered. Is there any way to make this scrollbar work for larger datasets?
You'll see what the problem described above looks like in this link:
https://jsfiddle.net/sauravvenkat/96ue59qy/
Highcharts.chart('container', {
chart: {
type: 'column',
color: 'rgb(245,111,35)',
},
title: {
text: 'Physicians By Specialty'
},
subtitle: {
text: 'Source: Physician Specaialty'
},
xAxis: {
type: 'category',
title: {
text: null
},
scrollbar: {
enabled: true
},
// min: 0,
max: 7,
tickLength: 0,
labels: {
rotation: -60
}
},
yAxis: {
title: {
text: 'Profiles',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Totals',
color: 'rgb(245,111,35)',
data: [["Spec1",1000],["Spec2", 1000], ["Spec3",500],["Spec4",300],["Spec5",1000],["Spec6", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300],["Spec37",300], ["Spec38",300], ["Spec39",300], ["Spec40",300], ["Spec41",300], ["Spec42",300], ["Spec43",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Spec47",1000],["Spec48", 1000], ["Spec49",500],["Spec50",300],["Spec51",1000],["Spec52", 1000], ["Spec53",500],["Spec54",300],["Spec55",1000],["Spec56", 1000], ["Spec57",500],["Spec58",300],["Spec59",300],["Spec60",300], ["Spec61",300], ["Spec62",300], ["Spec63",300], ["Spec64",300], ["Spec65",300], ["Spec66",300], ["Spec67",300], ["Spec68",300], ["Spec",300],["Spec24",1000],["Spec25", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Unknown",250]]
}]
});

It happens because the number of points in series is bigger than the default value of the cropThreshold property (more about below, in the API Reference section). As a solution, set the property with the bigger value.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.column.cropThreshold
Example:
https://jsfiddle.net/q8pn2dwf/

Issue parsing JSON for use as data in HighCharts

I'm trying to create a chart using highcharts with dates on the x-axis.
I'm using the following example from the Highcharts website as it is almost exactly what I am trying to achieve.
Using getJson I am getting json from a URL in this format:
[[Date.UTC(2016,04,29),3],[Date.UTC(2016,04,30),1],[Date.UTC(2016,05,02),4]]
As you can see it is similar to the format used in the example. However I get the following error from getJson:
angular.js:12416 SyntaxError: Unexpected token D in JSON at position 2
I don't think Date.UTC is the issue, as when I remove it I still get an error for the next character "(".
When I remove the getJson function and simply hardcode the above values into data, exactly as it is formatted above, the chart renders perfectly. I don't understand how it works when I hardcode it but doesn't if not.
The code is as follows (exactly like in the official highcharts example really)
$(function () {
$.getJSON('http://localhost:8181/graphData', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Visitors per day'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Num people'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});

Unable to correctly position the tooltip content in HighCharts

I am using HighCharts combination chart to compare a forecast value(indicated by line) and a cumulative value (indicated by column). The cumulative value keeps increasing weekly and I want to be able to see if it reaches the predicted forecast value.
I created a graph in this js fiddle, http://jsfiddle.net/aroauy4t/ .
I have shown the js code below.
$(function () {
$('#container').highcharts({
title: {
text: 'Forecast Vs Cumulative chart'
},
xAxis: {
categories: [' ', ' ', 'Bananas', ' ', ' ']
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Cumulative',
data: [0, 0, 5, 0, 0]
}, {
type: 'line',
name: 'Forecast',
data: [3, 3, 3, 3, 3],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
});
But the tooltip content overflows when the x axis doesn't contain a label like in the image shown below.
How can I get the tooltip to behave without any overflow (like in the image below)

You could also make use of tooltip - useHTML property.
When turned on the tooltip is rendered as excepted.
tooltip: {
useHTML: true
}
http://jsfiddle.net/aroauy4t/2/

I got it to work (I don't know HighCharts very well) by using the following in your js fiddle:
categories: ["\u00A0", "\u00A0", 'Bananas', "\u00A0", "\u00A0"]
00A0 is the unicode character for non-breaking space.
Maybe it will work for you.

Highcharts - Area between two y values highlighted

I have a situation where I need to predict a trend in a time series, and I have to display confidence intervals. Is there a way to plot two sets of y-values in Highcharts as linked, and shade the area between the two? Something like this:
http://www.psychosomaticmedicine.org/content/74/4/377/F2.large.jpg
I have five time series: the prediction, two time series that bound the narrower confidence interval, and two more time series that bound the wider confidence interval.

The new Beta has that feature:
see jsFiddle
You can read more about the upcoming features in this post.

Highcharts does not natively support range charts (as of version 2.2.5), but there is a workaround. You can stack two area series on top of each other, with the foremost series having a background color matching that of the chart background.
And here is example javascript (that results in this chart):
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
title: {
text: 'Range chart emulation'
},
xAxis: {
},
yAxis: {
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 0,
stacking: 'normal'
}
},
series: [{
// this series defines the height of the range
name: 'Range',
data: [1,2,3,5,7,8,9,6,4,7,5,3,4,7,6,5,6,7,5,4,2]
}, {
// this series defines the bottom values
name: 'Dummy',
data: [0,1,2,3,3.5,7,8.5,5,2.5,5.5,3,2,3,5.5,4,3,4,5.5,4,3.5,1.5],
enableMouseTracking: false,
showInLegend: false,
fillColor: 'rgba(255, 255, 255, 0)'
}]
});
});