How do I stretch the Y axis in chart.js? - chart.js

I'm looking to product a fairly small-sized comparative line chart where the actual data values aren't significant (the associated data table always accompanies the chart) but the point of the chart is to visually show the daily/weekly trend.
At full size the graph looks nice.
But when the containing div is constrained to shrink the size, the graph Y-scale shrinks much more in proportion than the X-scale.
What I need instead is something that looks like this.
What am I missing? I can't find any options that affect this.

You can set the maintainAspectRatio option to false in the root of the options object

Related

How to rotate labels in Power BI?

I have the following graph, and I want to rotate the X-axis labels in 40°, how can I do that?
PowerBI does not let you override the label orientation but rather adjusts it based on the space you allocate to the visual. Try making your visual a bit wider. For long labels, increase the maximum size of the X Axis on the settings to give more space to the labels and less to the bars. You can also tweak the padding and width settings to eek out a little more space. Also, consider abbreviating long labels.
Under the x-axis switch on the concatenated label. THis should do the trick for you
I went through the same issue/requirement but found no available configuration option for X axis labels. Labels are adjusted automatically based on number of BAR and width of the chart. Anyway, you can look on different options under "X-Axis" after changing the Type to "Categorical" as shown below-

Having trouble building chart from multiple columns in Power BI

I would like to create a simple chart from 2 or more columns in Power BI.
Here's my data, for each column, a 1 marks an occurrence of an event, null means it did not happen.
I would like to turn this data into a very simple bar graph, showing both these fields' numeric totals (i.e. summing all the 1's). The bars would be shown side by side. I would like it to look exactly like this, only instead of male/female it would show "alcohol occurrences" and "MDMA" occurrences.
Here's my stacked column chart:
And when I try and put the column names on the axes so that they can be properly labeled, I get this:
I can achieve most of what I want using a clustered bar chart, but the problem there is that it won't let me label the axis with the alcohol / MDMA column names:
How can I make a simple, labeled graph, stacking both columns up against each other, showing the numeric sums for each column? Again, I want it to look exactly as the male/female example shown above. Is this even possible? Thank you in advance.
In the above scenario, all the values are considered to be in the same category and that means there is no direct way to do this. There are a couple of workarounds to make it look like the desired output:
To get the gap between the two bars:
You should create a new measure, Measure New = 0
Add this measure in the middle of the two values in the bar chart
This should give you a gap in between the two bars
To get the axis values added:
Create two text boxes with the text "Alcohol" and "MDMA" added
Place these text boxes below the respective bars to make it look like they are the axis values
These workarounds can become quite tedious when you have to do it for a larger number of charts/values. On a lighter note, it baffles me that you can consistently come up with these specific scenarios where you expect the charts to do exactly the opposite of what they are meant for 😉

Is it possible to develop the line charts with multiple colors in powerbi?

I developed the few Line charts for BMP280 sensor data in powerbi. This is one of the line chart for displaying the temperature value by time and device id.
But I want same line chart with different Color like this below image, whenever temperature value suddenly changes.
Can you please tell me is it possible to develop the Line chart with multiple colors?
If you're willing to consider a vertical bar chart instead of a line chart, you would be able to create a calculation for each row that determines whether the change is significant, potentially by comparing an aggregate of recent measurements to specific thresholds.
Once you do that, you would use this column's value as a legend for your visualization. So if a row has a value of "Significant Positive Change" (or something like that), the bar or bars showing that change can be red.
Your other alternative is to use an R-based visual, of which there are surely examples of this type of visualization. I'll update this answer if I find one that looks promising.
Instead of tending 1 data series, you can split it into 2 data series e.g. one with normal temperatures and one with high temperatures. Then you can just plot these in different colours. Just make sure that the ranges are same i.e. cannot be 'Auto'.

Baidu ECharts2 dynamic chart position based on the legend height

I'm using Baidu ECharts2 to visualise a dynamic amount of series (up to 100) as a line chart.
The issue I face is the legend overlaps the graph in case if the series are too many.
I spent good 2 hours in searching the documentation and reading, but cannot figure out any way to set the graph position (y/y2 top/height).
It seems the chart consists of different elements (legend, toolbox etc), but none of them seems to be the graph itself.
An example I found showcases a fully responsive way to position pie charts, but this is not applicable in my case:
https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/pie-media
I'd be grateful if someone has more experience with ECharts and can tell me way to move the graph down by y and set a height.
Thank you!
Your best option may be to set the legend type to scroll so it fits on one line.
legends.push({
type: 'scroll',
show: true,
data: myData,
...
});
You may also be able combine Ovilia's and Zain's solutions to move the grid down to leave space for the legend. Unfortunately that would require a way to determine the legend's size before setting the chart's container size.
You can set grid position to make it.
In ECharts 2, you may set grid.y, grid.y2, or grid.height.
In ECharts 3, you may set grid.top, grid.bottom, or grid.height.

Google Bar Chart using hAxis.logScale - gridlines appear at regular intervals

I am creating a Google Bar Chart and have an outlier in the data. I would like to use the logscale option to show the data - otherwise, the large data result overwhelms the smaller ones. The logscale works effectively, but I am afraid the users will not notice the fact that it's a logscale, because the gridlines are at regular intervals. If the look hard at the labels on those gridlines, they will realize that the scale is changing, but normally on a logscale chart, the gridlines would start getting closer together (at least on logscale graphing paper).
I've looked through the options and can't find anything that helps. Can I specify the positions of each gridline in the hAxis? Any thoughts?