I would like to know if this is possible to do with Chart.js. I have not been able to figure it out.
Basically, I want a horizontal bar chart where time is on the X axis, and the bars have data that is a start date/time and end date/time, such that the bars "float" and are not anchored to the left side of the chart. The bar would start at the start time and end at the end time, as labeled on the x axis.
Also, I need the y axis labels to be inside the horizontal bar.
Does Chart.js support this use case? Does anyone have sample code? Thanks!
Yes they support floating bars (https://www.chartjs.org/docs/latest/samples/bar/floating.html) if you add the property indexAxis: 'y' in the options object it will become a horizontal bar chart. to get the labels in the bars you will need to use the datalabels plugin: https://chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html
Related
I am using Chart JS for bar representation. and using this link https://stackblitz.com/edit/ng2-chart-scrollable?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts for scrolling the bar chart.
In vertical bar, everything working fine. But in horizontal bar while scrolling the y axis moving.
It is because of the characters length the chart is moving on scroll.
In the above picture, you can see the chart position.
this is second picture the chart position slightly moves to left.
i Know this is because of the character, I have tried some logic like adding empty spaces based on maximum character shown to other words which is less than the bigger words.
Is there any way to make it fixed without moving. or can we try adding margin left before y axis label, if yes how to add a margin to it. Because in highchart I have seen something like margin left fixes this thing, But I don't know how to implement in chartjs
I have a bar type chart in chart.js with some columns and i want to draw a straight horizontal line at some point to the chart overt the bar columns.
I've tried to add a simple line type chart with equal point, but the problem is, the line doesn't start from X axis. The points are centered because of bar chart categories, but i want the line to be started from X axis.
Is there a way to do this?
I've done it by adding a second hidden X axis and i use that for the line chart.
I am using an NVD3 multibar graph with a focus chart. I want the ticks on my secondary (top) x-axis to line up properly with the bars on the primary (bottom) x-axis - preferably at the beginning of them. Currently, the ticks don't line up with the bars at the same place. Some of them are over a neighbouring date or in the middle of the bar, as shown below:
The ticks coincide with events on specific dates. Both axes use the same scale. Its domain is assigned on a brush event based on the extent of the selection on the context graph by the following:
x.domain([new Date(extent[0]), new Date(extent[1])]);
I also tried this:
x.domain([new Date(extent[0]), d3.time.day.offset(new Date(extent[1]), 1)]);
which lines up nicely at the front of the bars for the beginning selection, but doesn't keep the ticks in place when focus range is changed. How can I keep the ticks in line with their bars?
EDIT: I specify the location of the ticks using tickValues(). x is a d3.time.scale().
The problem was I was missing bar data for some dates so the number of dates on the scale didn't match up to the number of bars. I fixed this by inserting 0 values in the data for missing dates.
Flot chart is repeating ticks on right Y axis when:
alignTicksWithAxis:1
I want to align both axes but hide repeated tick values.
http://jsfiddle.net/AUrfY/20/
Is there something in the API i have missed or i have to check thicks before painting and hide duplications.
Set the tickDecimals option to 2 to get reasonable labels for the right y axis (see this updated fiddle).
The label values are not really duplicated, but they are rounded so that they seem so.
Want a simple fix for jqplot axis display. I am using Bubble charts for chart display, and CategoryAxisRenderer for axis.
All I want is the axes to display in top-down fashion, rather than the default bottom-up one. Meaning, the x axis is displayed on top of the chart increasing from left to right, and the y axis starts from the top increasing from top to bottom!!
Have looked in for various in-built jqplot options but to no luck. I am afraid that the solution lies in altering the css definitions for jqplot axis, but i do not want that, as it would consume huge amounts of time just to understand someone else's css. Please if someone could help!
Have got my solution finally.
Reversed the array that had to be printed row wise, hence both chart and the y axis came up correctly.
The second x axis , did not solve my problem. Instead for the particular chart id , modified the the css class jqplot-xaxis and that did the trick.
myBubbleChartId .jqplot-xaxis{
position : absolute;
top : -20px !important;
}