We Keep Coding

Hide specific x axis **labels** in Chartjs

I would like to hide specific x axis labels that are less than moment().valueOf(). So If I have 12:40, 12:45, 12:50 and 12:55 is the current time then I want to display 12:55 and hide the past time interval labels. Key here is to only hide the labels not get rid of the them.
My chart max x-axis time is always present time and increases as you pan right.
I've managed to get filtered ticks time as an array ["12:55"] but the chart still shows all the other time before 12:55 .
My xAxis configuration
xAxes: [
{
xAxisID: 'x-1',
type: "time",
time: {
unit: "minute",
displayFormats: { minute: 'HH:mm' },
stepSize: 5,
min: chartMin,
max: chartDisplayMax,
},
afterBuildTicks: function (axis) {
const { ticks } = axis;
const ticksToDisplay= ticks && ticks.filter(tick => tick >= moment().subtract(5, "minutes").format('HH:mm'));
return ticksToDisplay;
},
ticks: {
display: true,
},
},
],

Highcharts - Alignment issue on 3rd Y axis

I have three Y axis and two of which has got multiple spline series to be shown. My data is a time series data and it is all working as expected. Just that the labels of one of the Y axis is mixing up with chart area.
https://codesandbox.io/s/github/ismusidhu/yaxis_alignment_issue_highcharts/tree/master/

You can resolve it by setting appropriate yAxis.offset:
yAxis: [{
title: {
text: "POAI [W/m2]"
},
opposite: true,
offset: 70,
min: 0,
labels: {
format: "{value} W/m2"
}
}]
Demo:
https://codesandbox.io/s/alignment-of-highcharts-tertiary-y-axis-issue-bo7h4

How to fit Y axis in c3

I want to use rotated axis and I want to fit Y axis.
How can I do this?
I tried :
c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-10-31', '2013-12-31', '2014-01-31', '2014-02-28'],
['sample', 30, 100, 400, 150],
]
},
axis : {
rotated: true,
x : {
type : 'timeseries',
tick: {
fit: true,
format: "%e %b %y"
}
},
y: {
tick: {
fit: true
}
}
}
but nothing changes. Any help?
I use 0.4.10 version of c3.

Didn't quite get what you wanted to do, but the
rotated: true
seems to be doing what it is supposed to do i.e. swap the x and y axis. (fiddle - http://jsfiddle.net/g93c77Lu/)
fit is not a valid option for the y axis, so it doesn't actually do anything.
The x axis fit (http://c3js.org/reference.html#axis-x-tick-fit) does what it is supposed to too (the ticks are according to the data point) - just change the true to false in the fiddle to get an idea of what it will look like without the fit.
Note - y type is also not available yet (http://c3js.org/reference.html#axis-y-type) in case you were thinking about swapping the data arrays.

jqplot tooltip Content Editor

I m Facing Problem in Displaying tool tip for jq plot bar chart
My jqPlot Code Is
<script class="code" type="text/javascript">
$(document).ready(function(){
var s1 = [0,10,20,30,40,50,60,70,80,90,100];
var s2 = [-100,-90,-80,-70,-60,-50,-40,-30,-20,-10,-0];
var ticks = ['01-jun','02-jun','03s-jun','04-jun','05-jun','06-jun','07-jun','08-jun','09-jun','10-jun'];
var plot1 = $.jqplot('chart1', [s1, s2], {
animate: !$.jqplot.use_excanvas,
stackSeries: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true, barPadding: 10,barMargin: 15},
pointLabels: { show: true }
},
series: [
{ color: '#68BA38',label:'Uptime' },
{ color: 'red',label:'Downtime' },
{ label:'abcd' }
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: 1,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1,
min:-100,
max: 100,
}
},
highlighter:{
show:true,
tooltipContentEditor:tooltipContentEditor
},
});
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
</script>
Its Displaying Tooltip like this: uptime,20 or downtime,-20
i Want To display Tooltip contain my tick value like: 01-jun

Had exactly this question myself, so I used Firefox's Web Developer tools to examine the plot object in the tooltipContentEditor function to find where the x-axis labels are. It is in plot.options.axes.xaxis.ticks. So the code you want to get your data point's x-axis label is:
plot.options.axes.xaxis.ticks[pointIndex]
This is the x-axis label for the point index in question.
My complete code for the callback function I now use is:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
return plot.series[seriesIndex]["label"] + ": " + plot.options.axes.xaxis.ticks[pointIndex] + ", " + plot.data[seriesIndex][pointIndex];
}
This shows the series label, the x-axis tick label, then the data point value.

I think it might be something like
return ticks[pointIndex];

Highchart datetime graph x-axis unable to get data on plot when min and max is on

$(function () {
$('#container').highcharts({
chart: {
showAxes : true,
type: 'line',
marginRight: 130,
marginBottom: 25
},
tooltip: {
crosshairs: [true],
shared : true
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type :'datetime',
tickInterval : 12*30*24*3600* 1000,
min : Date.UTC(2011, 0, 1),
max : Date.UTC(2020, 0, 1),
label : {
align : 'left'
}
},
yAxis: {
title: {
text: 'PRICE Rs. / SQ.FT.'
},
lineWidth: 2,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
});
});
My x-axis having Years and data series having information which i want to show on Y axis.
When i remove the interval from 2010 to 2022 i . e comment min and max option highcharts draws a graph starting from 1970 , but no points afterwards.
http://jsfiddle.net/R8kx7/3/ here is the link

Based on your comments to #SteveP answer, if you don't want to explicitly pair x values to each y for each series, use the plotOptions.series pointStart and pointInterval properties.
plotOptions: {
series: {
pointStart: Date.UTC(2011, 0, 1),
pointInterval : 12*30*24*3600* 1000
}
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
Updated fiddle here.

Although you are specifying min and max, your data has no x values specified, so it is assuming that the date time values are starting at 0. There are several ways to render the chart you want.
Firstly, you could specify x values in your data points e.g.
{x:Date.UTC(2011, 0, 1),y:2165}
Another way is to not use a datetime axis type, and just specify the categories you want in the x-axis:
categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
The second option is probably a bit simpler http://jsfiddle.net/K6xxz/