Develop Reference

Google chart not display x and y legend

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.

Apexcharts scatter dots is hidden under eachother

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();

Does Flot supports interval bar plot?

Does Flot offers an option to make the bar chart float?. I am looking for a Flot equivalent to interval bar plot (PyChart). The following picture is taken from the link:
(I am aware that Flot may not support this since it seems like each bar in Flot only has one variable, but I am not sure).
Edit: Any javascript library suggestion is also welcome!

I managed a workaround using Flot's bar chart and Flot's stacking. Basically for the empty space, I create a stack with white color (which somehow got translated into transparent except for the edges). Unfortunately, Flot's stacking require all stacks of the same level to be of the same type/color. In order to circumvere this, some of the bars have zero width in the stacks of wrong colors. Result looks surprisingly good!
The corresponding code follows (the example data does NOT corresponds to the image above, since it would be a little too large. This shows only two of the "colors").
var series = [
{
data: [
[24.0, 0],
[6.93333333333, 1],
[6.95, 2],
[6.91666666667, 3],
[6.95, 4],
],
color: "#FFFFFF",
},
{
data: [
[0.0, 0],
[0.0666666666667, 1],
[0.05, 2],
[0.0833333333333, 3],
[0.05, 4],
],
color: "#FFFF00",
},
];
date_ticks_pre = [[0, "Okt 19, 2014"], [1, "Okt 20, 2014"], [2, "Okt 21, 2014"], [3, "Okt 22, 2014"], [4, "Okt 23, 2014"]];
var options = {
series: {
bars: {
show: true,
barWidth: .75,
horizontal: true,
align: "center"
},
stack: true,
},
xaxis: {
ticks: 24,
},
yaxis: {
ticks: date_ticks_pre,
},
zoom: { interactive: true },
pan: { interactive: true },
};
$.plot('#flot_plot',
series,
options);

Can't force flot number of ticks

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>

Is is possible to change line color in highchart xy plot for specific y range only?

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.