chartjs-2.6.0

问题 How can I move my labels on my x axes in between another x axes label. Nothing seems to work and I was unable to find anything on the docs. Is there a workaround? I'm using line chart time series. https://www.chartjs.org/samples/latest/scales/time/financial.html Currently, with the code I have its generating the figure below: var cfg = { elements:{ point: { radius: 4 } }, data: { datasets: [ { label: 'vsy', backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(), borderColor:

问题 The goal is to adjust the caret tooltip to be positioned above my horizontal stacked bar graph. oddly it works by setting yAlign to bottom and not to top. However it does not place the tooltip in the middle of the bar and it throws a TS ERROR saying Object literal may only specify known properties, and 'yAlign' does not exist in type 'ChartTooltipOptions'. Is there a correct way to do this besides setting the ts to ignore. options: { tooltips: { yAlign: 'bottom', displayColors: false,

问题 I would need help in setting the Font Size and Font Color for the Bubble Chart. Currently, i'm adding values on top using the Animation Block's OnComplete property. Please find the below Code for the same: animation:{ "oncomplete": function(){ var chartInstance = this.chart, ctx = chartInstance.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'center'; ctx

问题 I have following code for component.ts export class HomeComponent implements OnInit { Linecap = {}; dataArray=[]; constructor(private chartGetDataService: ChartGetDataService) { } ngOnInit(): void { this.chartPlotting(); } public testMethod(){ this.chartGetDataService.getLatestData1().subscribe( list=>{ this.dataArray=list.map(item=>{return item.payload.val()});} ); console.log(this.dataArray); return this.dataArray; } public chartPlotting(){ this.Linecap= new Chart('canvas', { type: 'line',

问题 I'm trying to create a linechart, using react-chartjs-2, that has a vertical line when hovering over the datapoints in the chart. Like in this picture below: Chart requirements I tried using the chartjs-plugin-annotation plugin, but with mixed results. I managed to create a static line, not understanding how or why it works. How should I achieve this? Am I onto something? const data = { labels: [...week(d)], datasets: [ { ... data: [10000, 9500, 7000, 4500, 2500, 1500, 500, 0], } ] }; var

问题 I'm trying to create a linechart, using react-chartjs-2, that has a vertical line when hovering over the datapoints in the chart. Like in this picture below: Chart requirements I tried using the chartjs-plugin-annotation plugin, but with mixed results. I managed to create a static line, not understanding how or why it works. How should I achieve this? Am I onto something? const data = { labels: [...week(d)], datasets: [ { ... data: [10000, 9500, 7000, 4500, 2500, 1500, 500, 0], } ] }; var

问题 I created a simple line chart using chart.js with 3 Y axes: https://codepen.io/anon/pen/dZVgKw As you can see, the last one is going from 10 to 20 without any number between. How can I set step size here? This is how I add an axe: { id: 'C', type: 'linear', position: 'left', ticks: { max: 10, min: 20, }, } Thanks. 回答1: How can I set step size here? Straight from the samples (Linear Scale, step size): By setting a stepSize value. scales: { xAxes: [{ display: true, scaleLabel: { display: true,

问题 I need to draw a chart that looks like the one on the picture. How do I do that with chartjs2? Unfortunately, I couldn't find any examples that show how to implement it. 回答1: Did it like this in React for 2 lines: <Line data={{ labels: [100, 200, 300, 150, 250, 400], datasets: [ { label: 'My red line', fill: false, borderColor: 'red', data: [null, null, 2, 0, 3], }, { label: 'My green line', fill: false, borderColor: 'green', data: [2, 4, 2, null, null, null], }, ], }} /> 回答2: First convert

问题 I have successfully got the information by onClick function. But is there any method i can get the point information on Hovering over the point. Right now onHover as mentioned in docs is not working to get the point. This is my jsFiddle. 回答1: In previous versions of Chart.js (for example 2.6) the onHover handler has to be configured as below: hover: { onHover: function(evt, item) { if (item.length) { console.log("onHover", item, evt.type); console.log(">data", item[0]._index, data.datasets[0]

问题 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,