Hey everyone I am experiencing some issue with the legend of chartjs
Every time i increase the borderWidth property of a dataset it increases the legends borderWidth as well - Current Behavior
But i want to increase the width of the line without increasing the border of the legend - Expected Behavior
Any suggestion would be really helpful TIA[enter image description here][1]
Current Behavior
[1]: https://i.stack.imgur.com/dVW7A.png
Related
I have a line chart with two datasets. Initially the Y Axis is 0-100. The first line is roughly a straight line around a value of say 70, the second line is all below say 30. If I zoom the chart vertically by forcing the Y Axis min to 65 and max 75 (ie I want to exam the first line expanded vertically) then when I hover over a data point, the tooltip is missing. Actually I figure it is off the chart (so to speak :-) ).
The tooltip seems to be automatically positioned vertically between the lowest and highest data points, even if one of those data points is way below the chart.
My question: is this a bug or is there a way I can tell chart.js to ignore data points that are off chart when determining tooltip vertical position?
I'd even be happy if the tooltip was always at a fixed vertical position, ie across the top of the chart or centred vertically on the chart.
Using chart.js V2.7.1
Tooltips have two positioning modes, as per the documentation:
Possible modes are:
'average'
'nearest'
'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position.
You can see both modes in operation at the relevant samples page.
average is the default mode. From your description, switching to nearest should resolve your issue.
I have a chart that shows 3 datasets - 2 Line, 1 Bar.
I would like to be able to format the Y-2 axis labels in the screenshot below with HTML to allow me to show the values in each tick as bubbles to match the styling displayed on the line data points. (I am using the datalabels plugin to achieve the data point styling https://github.com/chartjs/chartjs-plugin-datalabels).
In addition to this I would like to have all labels with "XLabelLine1" and "XLabelLine2" to have a line break between them.
Is this possible? From looking at the docs it looks as if the axis labels can only be strings.
You are correct that the tick labels can only be strings and that the Chart.JS tick labels do not have HTML support. It's likely a plugin would need to be developed for this behavior. Sorry. :)
I have an Amcharts in a tab but when it is created on page load, it is compressed with an incorrect (too small and sometimes to 0px) height. When I switch tab and come back to the chart tab, then I can clearly see that it is resized and looks perfectly after some visible height changes.
I have seen a bunch of similar topics, but they all complain about the chart having a small size only when arriving on a tab and not on page load directly.
I have tried to call invalidateSize(), validateNow(), etc. after the chart is built on page load (even with a timeout) but it doesn't do the job.
Is it because of the container that wouldn't give enough info to Amcharts to process the correct size? How come Amcharts is able to recalculate the size of the charts when changing the tab and back to the chart one?
Would you please have any hints for me? Thank you very much
I use Bootstrap tabs system.
I have finally solved it by setting a fixed height
.amcharts-chart-div{
height: 436px !important;
}
Here's a google chart I've made:
I want the legend paging gone. On page 2 there are only 2 items, and obviously these 2 items could easily fit without paging.
After spending some time researching and playing around, it seems my only options are:
Make the chart area higher - It's already too big
Make the text smaller - It's already too small
Hide the legend and make my own - This is my last resort
Does anyone know how I can modify the legend height to fit the other 2 items?
Paging is gone only when legend.position is 'top' and give legend.maxLines:
legend:{ position:'top',maxLines:4}
https://developers.google.com/chart/interactive/docs/gallery/piechart?csw=1#Configuration_Options
It looks like you have extra vertical space at the bottom of the chart that you could use to expand the chartArea into:
chartArea: {
height: '85%',
top: '13%'
}
If that is not a viable solution, your only choice is to build a custom legend, as the API does not support altering the dimensions of the legend directly.
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.