I am attempting to get Chart.js bar charts to have "internal" left and right padding, such that the bars are centered with minimal width between them, but larger space to the left and right. By default it seems the left and right padding is simply half the space between bars. Looking at the docs, I assumed that I could use the categoryPercentage and barPercentage parameters together to accomplish my task, but it seems that is only for multiple bars within a single column, whereas I have multiple columns with one bar in each. See image for what I am trying to do. Thanks for any insight.
Related
My labels are aligning to the left side of my bars. I'm wanting them centered but I can't figure out how to make it happen. I checked the docs but I couldn't find the answer. Anyone know how to center them?
I have an AMCharts XYChart with one columnseries which is added and shown when I init the chart. I have another lineseries which I also add, but series.hide() when I init the chart. The legend then allows me to show/hide the lineseries.
Two problems:
1) When the chart is first set up, it prezooms to the single columnseries. I want the ability to zoom on the chart, but I don't want it to prezoom when it first loads with the single series. What is the chart configuration to disable this or return the chart to the full zoom extent onready (which would be a bit hacky).
2) The second issue is that sometimes when I click the lineseries in the legend to add it, the zoom doesn't work at first when the lineseries is added to the chart. Instead, it may only correctly zoom on the subsequent click. I may escape this second problem if the first one is fixed.
I have charts I want to sort descending. I've read there's a "more options" option if you click on the chart, which should give you ability to sort.
In chart below, there is no sorting option:
Here is the field the chart is based on (it's a single field):
And here's the way I set up the chart:
I click 'more options' and yet see no option to sort. Who knew such a simple task could be that difficult in PowerBI.
My best guess at this point is that you are using two different fields for Male and Female numbers. If this is the case, you won't get the sorting option since the values are coming from two different fields. If you simply want to interchange the position, you can do so in the values section. If this is not the case, please provide further details, so that we can look into it further.
Edit:
I don't think there is a sorting option without having a value in Axis. However, you can adjust the Inner Padding of the Y-axis (in the formatting pane), to get the visual you are looking for. Setting inner padding to 0% will remove all the gap between the two bars. Also, you can do the sorting now, since there is a value in the Axis box.
Note: If you want different colors, add the field in legend as well.
You are using a clustered bar chart. The columns are arranged alphabetically and can't be changed.
If you want to sort the bars by their values, use a regular stacked bar chart and put the "demo_female" in the Axis, not the Legend.
I am using Chart.js version 2.7.2 to create a simple, single series bar chart. I want every bar in the chart to fill all available space such that each bar in the chart "touches" its neighbor(s).
My research has indicated that I should be using the barPercentage and categoryPercentage settings, setting both to 1. I've done this and it makes the bars very wide, but it leaves a single pixel gap between them.
My initial assumption is that this was due to a grid line, but even if I turn off grid lines (gridLines.display: false) it still has the one-pixel gap.
JsFiddle
Here is a screenshot. See the gap between each bar? How do I get rid of that?
You will have to update to 2.8+ version of the library.
There were multiple instances of issues around this on their GitHub (i.e. [BUG] Spacing between vertical bars with percentages set to 1 and [BUG] Small gap between bars even with barPercentage and categoryPercentage set to 1).
There was a PR that made it into their 2.8.0 version that is supposed to fix the issues around this (as noted by #benmccann at the bottom of the PR page).
I want to hide couple labels, first 2 and last 2 in axis X.
I want to disable black line at the bottom of the graph.
I'm able to do it after the chart is loaded - using javascript and change it dynamically. When I add new data and use draw method, Graph is overwriting my dynamic stylesheets changes. I was trying to set it as an option in graph initializer but I couldn't find the solution for that.
I use areaChart.
It was 3 years ago. I don't need it anymore. I'm leaving this question for others.
It's a little hard understanding what you're trying to do, but I think I get it.
As I read it, you want to eliminate two variables from your DataTable when you plot your chart (to prevent them from being in the legend)? Assuming that's the case, you can either take them out of the data table, or use a ChartWrapper on your object, and set the view:{columns:[x,y,z]} option to the ChartWrapper. Assuming you can't change the DataTable, or a ChartWrapper isn't an option, and you just want to not have certain plotted objects appear in your chart but not in the legend, you want to set the series option. For example, assuming three columns in your DataTable, you can hide the third item as:
series: [{visibleInLegend:true}, {visibleInLegend:true}, {visibleInLegend:false}],
Second of all, if you want to hide the horizontal axis, you need to have continuous data, and set hAxis.baselineColor to 'clear'.
To hide some of the tick-mark labels, use ticks: ticklist to label the axis, and for some of the labels in ticklist use an {v:value,f:label} structure definition, with a zero-length string for the label.
Here's an example. Note the omitted labels for some of the ticks on each vertical axis. View source to see how I did it:
http://www.sealevel.info/co2_and_ch4c.html
Note the tick list definitions. This one is for the left vertical axis:
var vticklist1 = [{v:235,f:''},{v:250,f:''},275,300,325,350,375,400,{v:425,f:'ppmv'}];
The first & second ticks (at the bottom, for values 235 and 250) display no labels. The next six ticks, for values 275-400, display normally. The last (top) tick displays as "ppmv" instead of 425. The result looks like this: