chartjs-2.6.0 | 易学教程

Filter a legend Item with Chartjs.org V2.7

阅读更多关于 Filter a legend Item with Chartjs.org V2.7

问题 I am building a series of doughnut charts and I would like to remove the second item in the legend, so when I generate the legend with the generateLegend() method I just want to get the first value. In the documentation there is an option that reads Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data But I can't find an example how to use it. In this Pen you can see the 2 labels in the middle, I just want to show the first label. I tried different

One legend, multiple charts Chart JS

阅读更多关于 One legend, multiple charts Chart JS

问题 I have two pie charts with different data but same labels and background colors. How can I create a standalone legend (a legend without a chart) using ChartJS so that the legend corresponds to both the pie charts at the same time? I tried creating a pie chart with the data array set to an array of 0s. However, that causes an empty pie chart to be generated, which takes up a lot of space; so that's a no go. Any help would be deeply appreciated. 来源： https://stackoverflow.com/questions/51610867

Chartjs 2.7.3: Set Y data at the correct X position axis

阅读更多关于 Chartjs 2.7.3: Set Y data at the correct X position axis

问题 data: { labels: ['29 Oct, 18', '30 Oct, 18', '02 Nov, 18', '14 Nov, 18', '15 Nov, 18', '19 Nov, 18', '20 Nov, 18', '28 Nov, 18'], datasets: [{ pointRadius: 0, label: 'Positive', lineTension: 0, data: [{'x': '15 Nov, 18', 'y': 18636}], borderWidth: 1, backgroundColor: 'rgba(0, 255, 0, 0.5)', },{ pointRadius: 0, label: 'Negative', lineTension: 0, data: [{'x': '29 Oct, 18', 'y': -20480}, {'x': '30 Oct, 18', 'y': -284}, {'x': '02 Nov, 18', 'y': -1625}, {'x': '14 Nov, 18', 'y': -6622}, {'x': '15

Change tool-tip direction in react-chartjs2

阅读更多关于 Change tool-tip direction in react-chartjs2

问题 I have implemented the react-chartjs2 https://www.npmjs.com/package/react-chartjs-2 in my react app. I have implemented it successfully but i need to change the direction of the tooltip when hovering the chart. Currently it looks like this But i want my tooltip to look like this How can i achieve this My code for chart and chart options const barChartOptions = { tooltips: { custom: function(tooltip) { if (!tooltip) return; // disable displaying the color box; tooltip.displayColors = false; },

How to add background color between two lines in yAxis Chartjs

阅读更多关于 How to add background color between two lines in yAxis Chartjs

问题 How i can add background color between two lines in Y-Axis in chartjs if you checked the figure i need to be able to do something like this set a color between two lines first one is orange and then blue or whatever, i checked the official docs but i didn't find anything. also here is my chartjs configurations this.options = { responsive: true, maintainAspectRatio: false, scales: { xAxes: [ { gridLines: { display: true, color: chartjs.axisLineColor, }, ticks: { fontColor: chartjs.textColor, }

Always display ChartJS custom tooltips

阅读更多关于 Always display ChartJS custom tooltips

问题 After following several guides on here and from the official docs, I am absolutely stuck. I have some custom tooltips that will display a PNG graphic within it based on the name of the data in the custom tooltip. I have found several solutions to hide tooltips, or set them all to be always displayed, but none of them seem to work as I would like. I want the standard tooltips hidden, and my custom ones always shown. My code is as follows: HTML: <canvas id="pelagic" style="width:10vw;height

How can I get multiple charts(bar and line) with ng2-charts?

阅读更多关于 How can I get multiple charts(bar and line) with ng2-charts?

问题 I have bar chart and I want to draw average line on this bar chart. My solution: In data sets, I add element with type as ' line ': https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; public barChartType: ChartType = 'bar'; public barChartLegend = true; public barChartPlugins = []; public barChartData: ChartDataSets[] = [ { data: [65, 59, 80, 81, 56, 55, 40], label:

Chart js: Update line chart having two data sets

阅读更多关于 Chart js: Update line chart having two data sets

I want to update a line chart in chart js with two data sets. I've somehow managed to empty the chart and then able to fill in one of the data set. but unable to make both data sets working. here's the code. ajaxRequest( { url: 'reports/updateChart/?filter=true', method: 'post', data: data }, function (response) { /*refresh the tables with the new data sets*/ removeData(myChart); let label = [1, 234, 234, 234, 234, 234, 234, 34, 234, 23, 23, 41, 3, 2, 4]; let data = [234, 234, 5, 23, 34, 234, 234, 234],[22, 1, 123, 14, 2] }; addData(myChart, label, data); }); }); functions: function removeData