I am using a scatter diagram with apexcharts like this: https://apexcharts.com/javascript-chart-demos/scatter-charts/basic/.
My problem is that if there is two or more datapoints with the exact same value, they will be stacked above eachother and therefore only one is shown and the other ones are completely hidden (not shown on hover either).
Is there any function to make them all viewable even if they have the same value? Maybe some sort of offset if more of the same value or some tooltip showing number of layers or something?
Code:
var options = {
series: [{
name: "Data A",
data: [
[16, 5], [16, 5, [16, 5], [15, 2], [14, 1], [14, 4]]
},{
name: "Data B",
data: [
[16, 5], [14, 1], [14, 4], [12, 11]]
},
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Related
So... my problem is that the google chart is not displaying the bottom legend and vAxis values.
It should have, for example, on the left red box, the values 100, 200, 300...
And the bottom should have (orange box) "Solar energy" and (red line) "solar consumption" written on it.
I am printing it on jsPDF plugin, so its a hidden container, i cant display it on the screen
The html:
<div id="chart_div" style="display: none;"></div>
The js:
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var dataChart1 = new google.visualization.DataTable();
dataChart1.addColumn('string', 'Mês');
dataChart1.addColumn('number', 'Fora Ponta');
dataChart1.addColumn('number', 'Geração Solar');
dataChart1.addRows([
['JAN', 0, 0],
['FEV', 1, 1],
['MAR', 2, 2],
['ABR', 3, 3],
['MAI', 4, 4],
['JUN', 5, 5],
['JUL', 6, 6],
['AGO', 7, 7],
['SET', 8, 8],
['OUT', 9, 9],
['NOV', 10, 10],
['DEZ', 11, 11]
]);
var optionsChart1 = {
titlePosition: 'none',
vAxis: {title: 'Valores'},
hAxis: {
format: 'decimal'
},
legend: {
position: "bottom"
},
seriesType: 'bars',
series: { 1: { type: 'line' } },
height: 300,
width: 800,
colors: ['orange', 'red']
};
chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataChart1, optionsChart1);
});
After a few tests, i manage to work it out removing:
display:none;
from my chart div and adding:
position: absolute;z-index: -1;
So it will not appear on the screen and still avoid the bug of not showing the legend correctly because of the hidden content.
The scenario is represented in the fiddle below. I am using a column chart to represent the data. When there is multiple data only the highest is being displayed in the graph. I am expecting it to stack.
http://jsfiddle.net/7pccz1j4/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
min: 0,
minTickInterval: 1
},
series: [{
name: 'series1',
data: [
[1418075700000, 2],
[1418076000000, 2],
[1418076300000, 2],
[1418076600000, 2],
[1418076900000, 2],
[1418077200000, 2],
[1418077500000, 2],
[1418077800000, 2],
[1418078100000, 2],
[1418078100000, 3],
[1418078400000, 2],
[1418078700000, 2],
[1418079000000, 2]
]
}]
});
});
The same scenario with a line chart is this fiddle.
http://jsfiddle.net/RKVgx/253/
You need to set stacking option like in the example: http://jsfiddle.net/7pccz1j4/2/
plotOptions:{
series:{
stacking:'normal'
}
},
JSFiddle representing the problem.
I've seen many solutions here and on Google but they don't seem to work.
I've tried setting tickSize to 1, setting ticks as an array or number (15 in this case) and still the flot lib does as it pleases.
I've read the API doc so many times, I don't think I'm missing anything.
If you want to completely override the tick algorithm, you can specify an array for "ticks", ...
Relevant snippet of code:
xaxis: {
show: true,
ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
}
Does anyone have a solution? Feel free to edit the JSFiddle or just comment.
Thanks in advance!
I had better luck defining xaxis outside of series.
The structure is not entirely clear in the documentation.
var options = {
series: {
bars: {
show: true,
fill: true,
align: 'center'
},
shadowSize: 0
},
xaxis: {
show: true,
ticks: [[1,'test label'],2,3,4,5,6,7,8,9,10,11,12,13,14,15]
}
};
$(function() {
var options = {
series: {
bars: {
show: true,
fill: true,
align: 'center'
},
shadowSize: 0
},
xaxis: {
show: true,
ticks: [[1,'test label'], 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
}
};
var d2 = [
[1, 25],
[2, 35],
[3, 15],
[4, 13],
[5, 3],
[6, 8],
[7, 5],
[8, 13],
[9, 3],
[10, 8],
[11, 12],
[12, 15],
[13, 7],
[14, 4],
[15, 1]
];
$.plot($("#placeholder"), [d2], options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
I wonder is it possible to change line color in highchart for specific y range using some kind of function, I really don't know how to achieve this, this is my idea, as a beginner I don't know how to write function to do this, function which I want to develop would like this
Added in fiddle have a look FIDDLE
function range(ystart,yend,ycolor,xpoint){
// I do not know how to achieve this,
// I am interested send y range as a argument suppose in current example
// y : 1 - 6 should be in red color and
// x = 36 should have marker in yellow color
// So I would like to call like this
range(1,6,"#F90B0B",34)
}
This is actual code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6],
[24, 7],
[19,8],
[15, 9]
]
}]
});
});
Thank in advance for all volunteers
The easiest way would be to separate the data and create separate series (with different colors) for the different ranges. That would mean, of course, that you would have to create a custom legend.
Edit to your function:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6]
],
color: "#F90B0B"
},
{
name: 'Test Plot2',
data: [
[28, 6],
[24, 7],
[19,8],
[15, 9]
],
color: "#F909F9"
}]
});
});
At this moment is it not supported, only by two series, but in the nearest feature it should be available.
In HighCharts Line Chart, how do I set the colour of a series line depending on its value in relation to the value of a plotline.
For example, if I have a plotline y = 15, how could I make the series colour green when y < 15 and red when y > 15
http://jsfiddle.net/adamtsiopani/YBMny/
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'KPN Year View'
},
yAxis: {
plotLines: [{
label: {
text: 'Baseline',
x: 25
},
color: 'orange',
width: 2,
value: 15,
dashStyle: 'longdashdot'
}],
},
series: [{
name: 'KPN12345',
data: [
[1327881600000, 11],
[1327968000000, 18],
[1328054400000, 12],
[1328140800000, 5],
[1328227200000, 11],
[1328486400000, 17],
[1328572800000, 10],
[1328659200000, 10],
[1328745600000, 15],
[1328832000000, 10],
[1329091200000, 11]
]
}]
});
You can do this with a combination of the threshold and negativeColor series options.
series: [{
name: 'KPN12345',
data: [
[1327881600000, 11],
etc...
],
threshold: 15,
negativeColor: 'green',
color: 'red',
tooltip: {
valueDecimals: 2
}
}]
Fiddle here.