Search Posts

Category: charts

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> […]

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, […]

Why is my angular-nvd3 line chart’s line not covering all data sets?

I am trying to create a line charts which covers points of {x: someX, y: someY}. But, it’s not covering all of my points, and maxes out when y is 783. Here is a picture of what’s going on: The airlines on the bottom should have the line covering them as well, but my line chart is stopping the line at {x: 21, y: 783}. How could I get this line chart to cover the […]

Custom tooltip with point labels in scatter plots of Charts.js v2.x

Having a hard time finding an example of scatter plot with a custom tooltip where an individual point has its own label. I know in d3.js/nvd3.js the data structure allows to specify each point with a custom label: { label: ‘point 1’, x: 10, y: 15 } Charts.js seem to only let you set x and y values for each point. With the custom tooltip example, one can set x value to appear in the […]

jVector Map colors when displaying 2 datasets

I have 2 datasets- ctrl.gdpData and ctrl.pdpData, and I’m displaying them (on jVector world Map) like this- $(‘#world-map-gdp’).vectorMap({ map: ‘world_mill’, series: { regions: [{ values: [ctrl.gdpData, ctrl.pdpData], scale: [‘#C8EEFF’, ‘#0071A4’], normalizeFunction: ‘polynomial’ }] }, onRegionTipShow: function(e, el, code){ el.html(el.html()+’ (Deposit – ‘+ctrl.gdpData[code]+’)’+’ (Activation – ‘+ctrl.pdpData[code]+’)’); } }); The ‘scale’ that I used doesn’t show any colors when I use the 2nd dataset also. I’ve tried using fill, backgroundcolor but none of them display the color […]

Multiple pie-charts in the same chart with HighCharts in angularjs

I have two pie chart to display in the same chart, I am using angularjs, the two pie chart can displayed without any problems, I have the same legend for both two chart, but in the chart all legend has been displayed. I followed this this question in multiple-pie-charts-in-the-same-chart-with-highcharts but not working n my case This is my code var total = $scope.widget.value; chartData = []; var serie2= []; var serie1= []; for (var key […]

Line chart not rendering in Firefox or Safari

I created an Angular 1.6 platform that uses Chart JS 2.7.1. The line charts render fine on Google Chrome 64.0, but not on Safari 10.1.2 or Firefox 58.0.2. ChartJS docs show support for Chrome 50+ Firefox 45+ Internet Explorer 11 Edge 14+ Safari 9+ The only error I get is in Firefox: ReferenceError: lso is not defined, which has nothing to do with ChartJS: Bar Charts and Pie Charts are loading fine in both Safari […]

Next Page »