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).
Related
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.
I have a barchart with chartjs. The x scale is of type: time, data/ticks represented hourly. I wrote a cutom plugin that draws something on canvas. Unfortunately I always get a -32768 for x.getPixelForValue(i), the y.getPixelForValue(i) seems fine.
Am I missed something important or chartjs doesn`t support getPixelForValue on time series bar charts?
In the meantime I figured out the issue...
The x.getPixelForTick(i) function returns the correct x coordinate for the bars.
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'm trying to automate some PowerPoint charts, but I'm having problems preserving some formatting.
When I add a chart using a chart template, the chart doesn't use the slides color scheme, but rather the colors it was saved with. It doesn't help to change the color scheme for the slide - the chart isn't updated. To make the chart update to the color scheme of the slide, I have to clear formatting for the chart. The problem with doing this is that all font sizes are automatically set to 18pt. I cannot find any easy way restore the font sizes for the chart without saving all sizes before calling clear, and set them back after clearing.
Have you looked into using the Format Painter function it may or may not work depending on a variety of factors from my quick look on the net (google it for lots of articles).
Also if you've done one chart you should be able to copy the formatting from one chart to another using the paste special option as mentioned here http://www.pcreview.co.uk/forums/there-format-painter-equivalent-use-many-charts-t3611646.html .
I have a chart generated from Google Charts that can be found here: Chart generate by Google Charts API. As you can see the x axis labels are being overlapped.
Anyone knows how to solve this?
See the docs under Bar Width and Spacing (chbh). There's this snippet:
a - space_between_bars and space_between_groups are given in
absolute units (or default absolute values, if not specified). Bars
will be resized so that all bars will fit in the chart.
So just add chbh=a to the options. Here's the example with this option added.