How to use tooltips with two overlapped x-axes in Chart JS? - javascript

I have a bar chart where weekly information is shown in an x-axis, the labels correspond to the current day (rightmost label) going back 1 week each (12/28, 12/21, etc). In the same chart there is another scale/x-axis with (different) daily information. When clicking on each day's bar, a tooltip appears with the information for that day.
Example of tooltip
The problem is that when clicking on one of the days where weekly + daily cross over, the weekly index is used so the daily data is displaying information for a different date (ex: for the eighth week bar date is 12/28, but daily information is for the eighth date 11/10).
I tried changing the order of the axes when declaring the chart options, but that messes up the display. I'm looking for a way to access the second axis index instead of defaulting to the top one.

Related

Plotly js : Different formatting for x-axis tick values and hover labels

I am using Plotly.js to generate some line charts. One example is below :
The x-axis values in the chart are timestamp values. Is there a way I can format the tick values on the x-axis and the values in the hover labels in a different way? I want to show only time part of the timestamp on the x-axis, but in the hover label, I want to show the complete timestamp value.

Is there a way to remove the time axis for the day view in Fullcalendar.io?

We are using fullcalendar.io https://fullcalendar.io/docs/slotLabelFormat.
My usecase is to show two calendars right next to eachother, so I only want to show the time axis for one calendar.
By time axis I mean the time interval labels (1:00, 1:30, 2:00) etc.

vis.js Timeline weekend dates

Is there a way to force .vis-grid.vis-saturday and .vis-grid.vis-sunday classes to show. I set up my timeline grouped by employees to show a monthly view but cannot get the Saturday and Sunday to how. I have to zoom in for it to show up. I tried manual add Saturday and Sunday for each employees but the result is not the same, can't get the whole column to shade. Is there anyway I can achieve the shaded to look like the built-in version with the monthly view?
Thanks
1st Picture: Auto shaded with .vis.sunday/saturday classes but have to zoom in to 2 week view to see.
2nd Picture: Manually added events to Saturday and Sunday.
This issues has already been fixed in vis.js.

chartjs Line chart Javascript

currently i am using chartjs to generate chart data for 12 countries.
i have date for 12 countries in Line Chart.
but the problem is that i cannot get country details when i hover over the points. Instead i get x and y axis values which are time and (sum) on y axis. how could i get data about country when i hover.
also if clicked on certain point i should get that data on click.
supposes i hovered on england and cliecked on it i should get a alert box containing england data only.
is there any solution to it in chartjs
The second point's functionality has been added in the ChartJS v2 beta if you're still having problems. As for the first point I don't think that's easily possible unless you're just wanting what country/dataset it is.

How to show full date to my labels and each x axis in different colour in highcharts?

I am just trying to achieve few things in my chart(Highcharts).
1). I want to show the full date always even its the same year. Currently its shows only day and Month.
2). How can i pass the colour to each one of the y axis labels.
(E.g.)
xAxis: {
categories: [[0],['Contract Period', 'blue'], ['Pre Contract Period', 'green'], ['Tender Period', 'red']]
}
3). I want to show the date for each point of the xaxis. Currently its shows just the starting date wherever i hover it.
4). My charts colors are depends upon Y axis labels. Not the X axis labels. I dont want to show any colors for the labels inside the legend. I just want to show the text Original Date and Actual Date. No colors. So only when i click the Original Date, its just display the Original Dates.
Moreover, I am just trying to get this chart like Gantt. Thanks.
What I got so far,
CHART SO FAR
1) You can use dateTimeLabelFormats and place %Y for day/month
2) You need to use labelFormatter and return value i.e as span with color.
3) Do you mean that on entire bar, toolip should display dates for each "part" of bar? If yes it is not possible.
4) So how it should look like?

Categories

Resources