I'm trying to make the title of my highcharts donut chart responsive - here is my current jsFiddle:
https://jsfiddle.net/klstack3/43Lqzznt/2/
HTML
<div class="wrapper">
<div id="container" style="width:100%;height:100%;"></div>
CSS
.highcharts-title {
font-weight: bold;
Javascript
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: "I want this to be responsive",
margin: 10,
align: 'center',
verticalAlign: 'middle',
},
tooltip: {
pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
}
},
series: [{
type: 'pie',
data: [{
name: 'Item',
y: 81.52,
sliced: true,
selected: true
}, {
name: 'Item',
y: 2.91,
}, {
name: 'Item',
y: 4.07
}, {
name: 'Item',
y: 2.07
}, {
name: 'Item',
y: 9.44
}],
innerSize: '50%',
}]
});
$(window).resize(function(){
var chart = $('#container').highcharts();
console.log('redraw');
var w = $('#container').closest(".wrapper").width()
// setsize will trigger the graph redraw
chart.setSize(
w,w * (3/4),false
);
});
The chart resizes with the browser but I can't get the title to do the same - it just overlaps the chart. Any help would be much appreciated!
You can treat the title the same way as you treat the whole chart - set its size on window.resize(). I moved all the code responsible for resizing to doResize function so that it can be called right after the chart is rendered initially (there's no window resize event and it needs to be called explicitly):
function doResize() {
var chart = $('#container').highcharts();
var w = $('#container').closest(".wrapper").width()
// setsize will trigger the graph redraw
console.log('redraw');
chart.setSize(
w, w * (3 / 4), false
);
chart.title.update({
style: {
fontSize: Math.round(chart.containerWidth / 30) + "px"
}
});
};
$(window).resize(doResize);
doResize();
Live demo: https://jsfiddle.net/kkulig/jksp88p1/
API reference: https://api.highcharts.com/class-reference/Highcharts.Chart#.title
Related
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>
I have created piecharts in my django project using highcharts.Each pie is in a seperate div and the width of all divs are set to 25%.I have created the pie using a for loop so they all have the same properties yet the pies differ in size.What could be the reason for this.
This is the code for my div.
var div = document.createElement("div");
div.id = "container"+i;
div.style.cssFloat = "left";
div.style.width="25%"
document.getElementById("main").appendChild(div);
And this is the code for my chart
for(i=0;i<res.length;i++)
{
Highcharts.chart('container'+String(i), {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: server[i]
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Success',
data: res[i]
}]
});
}
Pie size by default is automatically adjusted so that data labels have enough space to be rendered. This behavior can be changed by setting plotOptions.pie.size - the diameter of the pie relative to the plot area.
Code:
plotOptions: {
pie: {
size: '50%' // Can be a percentage or pixel value
}
}
Demo:
with fixed size: https://jsfiddle.net/BlackLabel/yptnreda/1/
without fixed size: https://jsfiddle.net/BlackLabel/zfpd3at7/1/
API reference:
https://api.highcharts.com/highcharts/plotOptions.pie.size
I need to add SolidGauge - HighCharts with drilldown.
I couldn't add drilldown for gauge. So I ve tried to load the div by calling script function
<div id="YTDSolidGauge" onload="drawGaugeChart();" onclick="drawBarChart(this);" ></div>
<div id="YTDBar" onclick="drawGaugeChart();"></div>
And trigger function in the barchart's function,
events:{
click: function(){
alert('test');
drawGaugeChart();
}
}
When I wrote the onload function in the gauge, the chart has disappeared.
I want the gauge to be loaded first and when we click on it, bar should be loaded.
When we click on the bar chart, it should be back to the gauge.
or we can reload the particular div to load another div.
I have a lot of charts, so it's better to call by function instead of writing 'onload' function in the body.
You need to catch click event in the series.point.events, destroy chart and create new one (bar). Then add also click event and call destroy/init.
var barOptions,
solidOptions;
barOptions = {
chart:{
type: 'bar'
},
series:[{
data:[1,2,3]
}],
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', solidOptions);
}
}
}
}
},
}
solidOptions = {
chart: {
type: 'solidgauge'
},
legend: {
enabled: false
},
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', barOptions);
}
}
}
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
}]
}]
};
Highcharts.chart('container', solidOptions);
Demo:
http://jsfiddle.net/nxaLpnLz/
I've been creating charts on my company's website with data that is populated from a csv file. I need to add two additional y axes on the right side of the chart. I tried doing so by following Highchart's instructions, but my data is coming from a CSV file and I can't manage to get the two additional axes to connect to the data. Meaning, the other two splines look flat compared to the one that is actually plotting to it's y axis.
Below is the chart's JS file. The CSV file is 4 columns, which from left to right are Date, Overall, VIX, GSPC
Thank you in advance!
function basi_overall_chart() {
//var to catch any issues while getting data
var jqxhr_basi_overall = $.get('../../datafiles/basi/company_BASI_Overall_VIXSP.csv', function (data) {
var options = {
//chart options
chart: {
//set type of graph, where it renders
type: 'line',
renderTo: 'basi_overall_container'
},
//set title of graph
title: {
text: 'company Bid-Ask Spread Index (BASI)',
style: {
color: '#4D759E'
},
align: 'center'
},
//set xAxis title
xAxis: {
title: {
text: 'Date',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
}
},
//set yAxis info
yAxis: [{
title: {
text: 'Basis Points (BPS)',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
},
labels: {
//give y-axis labels commas for thousands place seperator
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
//set y-axis to the left side
opposite: false,
//set background grid line width
gridLineWidth: 1
}, { // Second yAxis
gridLineWidth: 1,
title: {
text: 'VIX',
style: {
color: '#de5a3c',
fontWeight: 'bold'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
opposite: true
}, { // Third yAxis
gridLineWidth: 1,
title: {
text: 'SP',
style: {
color: '#4D759E',
fontWeight: 'bold'
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value);
}
},
opposite: true
}],
//stylize the tooltip
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 4
},
//enable and stylize the legend
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
borderWidth: 1,
borderRadius: 5,
itemDistance: 20,
reversed: false
},
//set the starting range. 0-5. 5="All", 4="1yr", etc
rangeSelector: {
selected: 5,
allButtonsEnabled: true
},
//set general plot options
plotOptions: {},
//disable credits
credits: {
enabled: false
},
//make download as csv format correctly
navigator: {
series: {
includeInCSVExport: false
}
},
//set name of chart downloads
exporting: {
filename: 'company_basi_overall',
//enable download icon
enabled: true,
//add image to download
chartOptions: {
chart: {
events: {
load: function () {
this.renderer.image('http://www.company.com/images/company_logo2.gif', 90, 75, 300, 48).attr({
opacity: 0.1
}).add();
}
}
},
//remove scrollbar and navigator from downloaded image
scrollbar: {
enabled: false
},
navigator:{
enabled: false
}
},
//make download as csv format correctly
csv: {
dateFormat: '%Y-%m-%d'
}
},
//set graph colors
colors: ['#002244', '#DBBB33', '#43C5F3', '#639741', '#357895'],
//series to be filled by data
series: []
};
//names of labels in order of series. make sure they are the same as series header in data file
var names = ['BASI', 'VIX', 'SP'];
//get csv file, multiply by 100 (divide by .01) and populate chart
readCSV(options, data, 1.0, names);
var chart = new Highcharts.StockChart(options);
})
//catch and display any errors
.fail(function (jqxhr_basi_overall, exception) {
ajaxError(jqxhr_basi_overall, exception, '#basi_overall_container');
});
}
(function () {
//set high level chart options for all charts
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
$('.chart_container').toggle(false);
basi_overall_chart();
$('#basi_overall_container').toggle(true);
all_crossable_volume_chart();
auto_assign_toggle_chart_buttons();
})();
How can I customize to make the smallest pie visible?
Youtube can't be seen as you can see from here: http://d.pr/i/nxeP
Here's my code ( my fetcher is in RAILS ):
$(function () {
//for donut
var data_series = <%= raw get_all_identities(#user) %> ;
var getColor ={
facebook: "#3d599b",
twitter: "#00abee",
instagram: "#736c59",
soundcloud: "#fa3d00",
youtube: "#d43c3b",
tumblr: "#3d5a71",
vine: "#00b589",
foursquare: "#0abadf",
linkedin: "#0abadf",
vimeo: "#1ab7ea",
fivehundredpx: "#000000",
wordpress: "#257ba0",
rdio: "#028ed4",
behance: "#000000",
flickr: "#ff0084"
};
$('#user_follower_chart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.2f} %'
},
startAngle: -90,
endAngle: 0
}
},
series: [{
type: 'pie',
name: 'Followers By Network',
allowPointSelect: true,
innerSize: '50%',
data: []
}]
});
var follower_chart, n, i, len;
for (i = 0, len = data_series.length; i < len; i++) {
n = data_series[i];
if (n[1] !== 0) {
follower_chart = $("#user_follower_chart").highcharts();
follower_chart.series[0].addPoint({
name: n[0],
y: n[1],
color: getColor[n[2]]
});
}
}
The red slice is visible, and appears to appropriately scaled.
I'm not sure what you expect to see for a slice at 0.2 %...
two things I would suggest:
1) set the borderWidth 0, and the slices will stand out a little more clearly.
2) this should really be a bar chart anyway.... if you make it a bar chart, you can set the minPointLength property so that small data points are still apparent.
example: http://jsfiddle.net/jlbriggs/4FxYg/
You can also try to use innerSize parameter
http://api.highcharts.com/highcharts#plotOptions.pie.innerSize