I want the segments go disabled other than the one which is active in doughnut chart. Is there any option to achieve it ?
I have tried using hidden, But it seems it is hiding whole chart. my expectation should like below
at the initial stage chart will look alike:
current output:
expected outcome:
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 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'd like to add paging controls to my Google Visualization bar chart, similar to the one described here (keywords: thenez101 Google Visualization BarChart Paging), but instead of flowing my paging controls around the Google bar chart, I'd like to place them on top of the chart. When I place my controls inside the chart's div, however, I see them only until the chart is drawn.
Assigning my controls a CSS class whose z-index property I have changed to positive and negative has not worked. Perhaps I can change their z position after my ready event has fired? Has anyone succeeded in getting this working?
Thanks, BH
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: