I am trying to put 2 graphics with different scale to one Google Chart:
var options = {
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
0: {
gridlines: { count: 10 },
viewWindow:{
max:250,
min:0
}
},
1: {
gridlines: { count: 10 },
viewWindow:{
max:20000,
min:0
}
},
},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1}
},
'chartArea': {'width': '90%', 'height': '75%'}
};
But I received this result:
All the data is positive numbers for both charts. Why I received -100 on the left side? What is wrong?
Thanks!
The solution is quite simple:
hAxis and vAxis contain the options of the horizontal and vertical axes, respectively. And if you want multiple vertical axes, you have to use vAxes (not vAxis)!!!
Related
I am trying to move my data labels inward so that they are easier to read. If there is a way to dynamically center them in the slice, that would be ideal.
I've read the docs and tried modifying the X & Y.. i've tried -50 to 50 and nothing seems to be impacting the position of these labels. Am I missing something?
var PTDLastMonthOptions = {
series: [35, 65],
chart: {
width: 300,
type: 'pie',
},
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
offsetX: 50,
offsetY: 50
},
colors: ['#00e396', '#ff4560'],
labels: ['PAID', 'UNPAID']
};
var PTDLastMonthChart = new ApexCharts(document.querySelector("#ptdLastMonthChart"), PTDLastMonthOptions);
PTDLastMonthChart.render();
#Edit 1 - Adding codepen:
https://codepen.io/flashsplat/pen/NWzowbx
#Edit 2 - I am convinced this is a bug and have reported it as such:
https://github.com/apexcharts/apexcharts.js/issues/3537
Thanks!
Change offset in plotOptions not dataLabels https://apexcharts.com/docs/options/plotoptions/pie/#dataLabelsOffset
plotOptions: {
pie: {
dataLabels: {
offset: -10,
},
}
}
Does highcharts have an option to have a multi Y axis diverged like in the below attached screenshot?
P.S Any other option apart having two highchart types of charts, and rendering them next to each other.
You can define yAxis property as an array of objects. For example:
series: [{
...
}, {
yAxis: 1,
...
}],
yAxis: [{
height: '80%',
...
}, {
offset: 0,
top: '80%',
height: '20%',
...
}]
Live demo: http://jsfiddle.net/BlackLabel/p2bf7tLn/
API Reference: https://api.highcharts.com/highcharts/yAxis
I am creating a multiple line chart with Google Chart API where I want to use 2 Y axis such as -> , but with one axis set to max 24000 for my 6 countries, and the second set to 90000 for the 'Total World' column.
The problem is that my set of options never returns the 'Total World' in the second y axis and the other 6 countries in the first y axis, no matter how I arrange the option 'targetAxisIndex':
var tot = 95000;
var min = 0, var max = 24000;
....
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:[
{targetAxisIndex:1},
{targetAxisIndex:0}
],
legend: { position: 'top', alignment: 'start' }
};
here is the complete code: http://plnkr.co/edit/u5xXExdkTTYU8fHxWzHB?p=preview
I found the answer on Google Groups:
Hi Chris,
The series option is supposed to be a mapping of series index to series options. When you specify it as an array, you're basically doing that assignment implicitly. So in your example, series 0 will go on axis 1, and series 1 will go on axis. All other series will go to the default axis (0). Your issue could be fixed pretty easily, by simply reorganizing your series such that the total is the first. Alternatively, you could explicitly specify that series 6 (your total series, 'country6') should go on axis 1. The default is for things to go on axis 0, so you don't need to explicitly specify that. Here's an updated version of your plunkr with the second version of the solution (since that was easier for me to do): http://plnkr.co/edit/GhsNcBCtDW0i4OTu0VJR?p=preview
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:{
6: {targetAxisIndex: 1}
},
legend: { position: 'top', alignment: 'start' }
};
var chart = new google.visualization.LineChart(document.getElementById(chartDiv));
chart.draw(data, options);
I have a column chart with two series, one of which I want to go down and the other up, like this:
However both of the series have positive y-values, which I can't change, e.g.
blue = [1746181, 1884428, 2089758, 2222362, 2537431, 2507081, 2443179,
2664537, 3556505, 3680231, 3143062, 2721122, 2229181, 2227768,
2176300, 1329968, 836804, 354784, 90569, 28367, 3878];
grey = [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
1447162, 1005011, 330870, 130632, 21208];
Using highcharts options, is it possible to have a chart like this? The example I used for the screenshot is this jsFiddle if it's useful to anyone, however it has a series with negative values which is not an option for me. Instead my data is more like this fiddle
I would try to use two separate yAxes: http://jsfiddle.net/zares7x9/2/, where one of them is reversed:
yAxis: [{
title: {
text: null
},
top: '5%',
height: '45%',
labels: {
formatter: function () {
return (Math.abs(this.value) / 1000000) + 'M';
}
},
min: 0,
max: 4000000
}, {
title: {
text: null
},
labels: {
formatter: function () {
return (Math.abs(this.value) / 1000000) + 'M';
}
},
offset: 0,
showFirstLabel: false, // hide 0-value
reversed: true, //reverse
top: '50%',
height: '45%',
min: 0,
max: 4000000
}],
Setting top and height allows you to render axes like one. Note, that you need to set for one of the series yAxis: 1, to inform Highcharts which series belongs to which axis.
I am using jqplot for a bar graph that has 1 very high number around 7 million and 2 very low numbers, less than 100,000 when they are charted on a bar graph the two low numbers are only a couple of pixels tall, you can barely see them.
I am wondering if it is possible to use disproportionate intervals on the x axis for example the lower half of the chart would be say 0 - 100,000 and then the upper half would go from 100,000 - 7,000,000
I can't find it in the options anywhere, I've set custom 'ticks' but all that does is squeeze all the low numbers into a tiny space at the bottom.
Google is no help.
Here is what I have so far
function init_graph() {
var line1 = [19877, 6643895, $('#inpSalary').val()];
var tickers = ['low number', 'huge number', 'low number'];
plot1 = $.jqplot('jqplot', [line1], {
stackSeries: true,
legend: {
show: true,
location: 'ne'
},
title: 'Data per month stack by user',
seriesColors:['#fcbaac','#f5564d','#1e3045'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
// barPadding: 6,
// barMargin: 15,
barWidth: 60,
highlightMouseOver: true
}
// shadowAngle: 135
},
series: [{
label: 'User1'
}],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickers
},
yaxis: {
ticks: [0,20000,30000,40000,50000,60000,70000,80000,90000,100000,7000000],
min: 0
}
}
});
}
You could switch to using the LogAxisRenderer, which by default with give you a log base 10 scale on the y-axis:
<snip>
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickers
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
min: 100
}
}
<snip>