Search Posts

Category: chart.js

Accessing chart functions when using tc-chartjs

I am trying to identify the label being clicked on an angular tc-chartjs chart. When I try to use getSegmentsAtEvent or getPointsAtEvent, I get the error vm.chart.getPointsAtEvent is not a function My html: <canvas tc-chartjs-bar chart-data=”vm.data” chart=”vm.chart” chart-options=”vm.options” width=”350″ height=”200″ chart-click=”vm.onChartClick($event)”></canvas> My js: vm.onChartClick = function (event) { if (vm.chart) { console.log(vm.chart.getPointsAtEvent(event)); } }; Source: AngularJS

charts.js tooltips on different data ranges

I’m using charts.js (with angular-charts directive), and I’m facing a problem with different dataset sizez. I have to display in a line-chart some values in a timeline. So my data is structured like this : datasets : [ [ {“x” : date1, “y” : 2 }, {“x” : date1, “y” : 5 } ..], //first dataset [ {“x” : date2, “y” : 3 }, {“x” : date4, “y” : 7 } ..] //second one ]; […]

How to show scale value if legend is selected

Hi Guys facing one issue in angular chart. I am using a Chart where I want to show scale value even if user select all legend. When no legend is selected when Legend is selected Here is the HTML : <!DOCTYPE html> <html ng-app=”plunker”> <head> <link rel=”stylesheet” href=”style.css”> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script> <script data-require=”[email protected]*” data-semver=”2.2.1″ src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js”></script> <script type=”text/javascript” src=”https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js”></script> <script src=”script.js”></script> </head> <body ng-controller=”MainCtrl”> <h1>Stacked Bar Chart</h1> <canvas class=”chart chart-bar” chart-type=”type” chart-data=”data” chart-labels=”labels” chart-series=”series” chart-options=”options” chart-colors=”colors”> </canvas> […]

ChartJS: Translate x axis month to other languages

I’m having difficulties in finding out how to translate the time axis. I’m using ‘MMM YYYY’ for time displayFormats in xAxes. So it always displays date like “May 2018”. Does anyone know how to localize here? For example, if the language is french, the month should be displayed as Mai instead of May. I searched everywhere, only find someone said it is possible to do that using time.parser, but I am not sure how to […]

How to fix ChartJs horizontalBar height Collapse with Big Data amount?

I am using ChartJs with my AngularJs project. My data have around 180 Objects. But when i use it with horizontalBar from ChartJs the chart is collapsed and unreadable at all like this. this is my config file. returnBubbleChartObject(labels, data, type = ‘bar’) { const chartObject = { // The type of chart we want to create type: type, // The data for our dataset data: { labels, datasets: [{ label: “Usage”, backgroundColor: ‘rgb(255, 99, […]

getting json data instead of hardcoded data in chart.js

I have implemented a stacked chart functionality for my project. I need data to come from JSON instead of hard coded as follows(in the code). Can anyone please help in consuming JSON using js / angularjs? Ultimate requirement is:- Labels will be fetched from Mongo db and data from JSON as of now and ata later stage from MongoDB. I have never worked with mongodb. I have written this for suggestion that would be useful […]

How to highlight specific variable in chartjs tooltip

I’ve got more than 10 chart-series on my line chart. On dot hover, I get a tooltip with 10+ values. Can I somehow highlight the value of specific line in the tooltip? Here is jsfiddle. When I type mode: ‘nearest’ I get the specific value that I want but lose others. So, bold value, bigger or something like that with other values would be great. Any suggestions how can I do that? Source: AngularJS

CanvasPattern as a color property does not work in angular-chartjs

Overview I used Patternomaly for creating a CanvasPettern (for a backgroundColor property in chart). If used directly with ChartJs it works perfectly. But when used via AngularChartJs, it does not work. Versions: ChartJs – 2.5.0 AngularChartJs – 1.1.1 Patternomaly – 1.3.0 Step to reproduce dummy code to make Stack Overflow allow jsfiddle link Here is a jsfiddle for convenience. Source: AngularJS

Next Page »