chart.js

问题 I am using https://github.com/ankane/vue-chartkick to draw Vue charts, but looks like it didn't say how to hide axis from there document. Does anyone know how to do it in this library? Thanks in advance. 回答1: The chart component has a library property that allows you to customize the options for the chart. To hide / remove the x-axis for a line chart would look like this: <line-chart :data="lineData" :library="chartOptions"> ...and in your component... data () { return { lineData: [ {name:

问题 I have an Angular 7 (Ionic 4) project, where I trying out Chart.js and need to be able to custom draw some labels on a Pie chart, as I Have asked here. I have been told I need to use a separate package for this, but I cannot get the import working for an Angular project, using the npm package. I have the following version... "chart.js": "^2.8.0", "chartjs-plugin-datalabels": "^0.6.0", .... "@angular/*": "^7.2.2", "typescript": "~3.1.6" I have tried as suggested here, but I get two errors.

问题 I have set up a chart.js chart which uses data from a mysql database. I have set up a rest service to provide tha data, with the ability to define the grouping ie. the data is measured a five minute intervals, but I group it in 3 hour segments with my SQL statement SELECT (75-round(avg(sensorValue),0)) as Value, Time FROM sensorpi.rawData GROUP BY UNIX_TIMESTAMP(time) DIV $default_interval ORDER BY time asc I would like to be able to change the granularity of the data by defining a new

问题 What would be the easiest way possible to display custom properties in the pie chart tooltip? var pieData = [ { value: 40, color:"#F7464A", highlight: "#FF5A5E", label: "Label 1", description: "This is a description for label 1" }, { value: 60, color: "#46BFBD", highlight: "#5AD3D1", label: "Label 2", description: "This is a description for label 2" } ]; var options = { tooltipTemplate: "<%= label %> - <%= description %>" }; window.onload = function(){ var ctx = document.getElementById("chart

问题 I want to use Chartjs(chartjs.org) as my charting tool along with AngularJS using TypeScript. I have installed DefinitelyTyped for Chartjs from GitHub to incorporate creation of Chartjs charts in my TypeScript written controller. I can't find any related questions on doing this thing. I just need to know how we populate data to our charts using DefinitelyTyped. 回答1: You can find example usages of chart.d.ts in the form of a tests file right next to the definition : https://github.com

问题 I'm fairly new to protractor so sorry if this is a stupid question. I'm looking into testing an application and need test the values inside a Chart.js graph. Has anyone got any ideas on how to get my protractor program to look inside the canvas. This is the canvas output in HTML. <canvas id="test" class="chart chart-line ng-isolate-scope" data="test.data" labels="test.labels" series="test.series" legend="true" options="test.options" colours="test.colours" width="1816" height="800" style=

问题 Excellent and free library from chart.js. I'm transferring my charts from Google charts to chart.js, because I can use them offline and it seems more responsive to window's changes of size. Furthermore I realised that my viewers in China could not see my Google charts because Google services are blocked in China. I've been reading the documentation regarding stacked vertical bar charts, but I can't figure out, how to make a chart like this. In all examples I saw for stacked bar charts, the

问题 I am using this example jsfiddle on But When I use a small screen labels start to overlap like this What I can do to prevent it ? I want to make it fully responsive. I tried to change length and other aspect ratios etc but no sucess. var ctx = $('#myChart'); ctx.height(500); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99,

问题 I m trying to implement chart.js in angular, have written a simple code to display chart on html, but there is not output on the page, also there are no errors. I m not getting where is the issue and why displaying chart is getting failed. slackblitz url for reference Code that I m trying in component: this.chart1 = new Chart('canvas', { type: 'doughnut', data: { labels: ['solid', 'liquid', 'unknown'], datasets: [ { label: 'test', data: [ 100, 200, 300 ], backgroundColor: ['#0074D9', '#2ECC40

问题 I am trying to draw a horizontal bar chart using chart.js 2.3.0 - var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d"); var MeSeData = { labels: [ "ME", "SE" ], datasets: [ { label: "Test", data: [100, 75], backgroundColor: ["#669911", "#119966" ], hoverBackgroundColor: ["#66A2EB", "#FCCE56"] }] }; var MeSeChart = new Chart(MeSeContext, { type: 'horizontalBar', data: MeSeData, options: { scales: { yAxes: [{ stacked: true }] } } }); But it only shows one bar. What did