Highcharts

Highmaps chart is empty in Angular 5

由 北城以北 提交于 2020-01-16 07:32:21
问题 I have a component where I have to show high maps. No errors but the maps is always empty My chart options object : let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }]; this.chartConfigObject = new MapChart(<any>{ chart: { borderWidth: 1, map: 'custom/world' }, title: { text: 'World population 2013 by country' }, subtitle: { text: 'Demo of Highcharts map with bubbles' }, legend: { enabled: false }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }

highcharts not responsive after reflow

由 天大地大妈咪最大 提交于 2020-01-16 04:37:05
问题 I am setting up a specialised Print button. The page is complicated and needs some pre-processing before being sent to window.print(). I have the Highcharts code working at this point. It correctly resizes the charts on the page, and then, post print, it sizes them back to their original size. The problem is that from then on, the charts will not respond to Media Query changes. The site is Responsive, built on Bootstrap, so this is not a functional result. How do I change the chart size, but

Highcharts: Generate chart from tables having linked data

由 这一生的挚爱 提交于 2020-01-16 02:25:08
问题 I have a table where data values are wrapped with an <a> tag. Highcharts plugin is used to generate a pie chart from that table. But for some reason it is not showing/ generating. If I remove link from data values, then it works fine. Is there any way to generate the pie chart while keeping the links? $(function() { $('#chart-cont').highcharts({ data: { table: 'datatable', }, chart: { type: 'pie' }, title: { text: 'Data extracted from a HTML table in the page' }, }); }); #chart-cont { min

Highcharts: Highmaps - Choropleth maps - All states are the same color

由 戏子无情 提交于 2020-01-16 02:06:24
问题 I have copied the demo code for the United States color axis map from the Highcharts website and substituted my own JSon file of values. The values are showing up in the tooltip and the legend has color gradients and values, but the states are all one medium blue color. The file values range from a few hundred to almost $4 million dollars for the states. This html page is being called in MVC5. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://code.highcharts.com/maps

highcharts custom datalabels duplicating

由 房东的猫 提交于 2020-01-15 11:36:21
问题 Can anyone tell me why the custom datalabels on my chart are displayed twice in some cases? Note that this is not related to the bug in the export service, but I set textshadow to 'none' just in case. It does not seem to be consistent. Thanks in advance. The JSFiddle is here: https://jsfiddle.net/zh3hvya3/ <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs jquery/1.8.2/jquery.min.js"></script> <style type="text/css"> #container { height: 400px; min-width: 310px;

highcharts custom datalabels duplicating

由 99封情书 提交于 2020-01-15 11:34:12
问题 Can anyone tell me why the custom datalabels on my chart are displayed twice in some cases? Note that this is not related to the bug in the export service, but I set textshadow to 'none' just in case. It does not seem to be consistent. Thanks in advance. The JSFiddle is here: https://jsfiddle.net/zh3hvya3/ <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs jquery/1.8.2/jquery.min.js"></script> <style type="text/css"> #container { height: 400px; min-width: 310px;

Highcharts: passing additional information to a tooltip

由 无人久伴 提交于 2020-01-15 11:22:09
问题 I have an array of data points that I am passing to a Highcharts chart that looks like mydata = [{ x: 1, y: 3, nameList: ["name1", "name2"] }, { x: 2, y: 4, nameList: ["name3", "name4"] }] I build the chart like this: $("#chart").highcharts("StockChart", { series: [{ data: mydata }, { data: yourdata }] }); Now, I would like to be able to access the nameList array from the shared tooltip, which I'm trying to do as follows: tooltip: { formatter: function() { var s = ""; $.each(this.points,

Highchart: exact distance between ticks

由 一笑奈何 提交于 2020-01-15 09:18:27
问题 How to find out the exact distance or set an exact distance (to pixel) between two ticks on x-axis with Highchart? I have used tickPixelInterval, it does not seem to set the exact distance between two ticks on an axis. Code for reference: http://jsfiddle.net/e0qxfLtt/21/ $(function drawCharts() { var chartData = [100, 120, 120, 140, 110, 110]; var index = 1; $('#b').click(function() { var buttonB = document.getElementById('b'); buttonB.disabled = true; if (index < chartData.length) { var x =

Highchart: exact distance between ticks

由 守給你的承諾、 提交于 2020-01-15 09:16:11
问题 How to find out the exact distance or set an exact distance (to pixel) between two ticks on x-axis with Highchart? I have used tickPixelInterval, it does not seem to set the exact distance between two ticks on an axis. Code for reference: http://jsfiddle.net/e0qxfLtt/21/ $(function drawCharts() { var chartData = [100, 120, 120, 140, 110, 110]; var index = 1; $('#b').click(function() { var buttonB = document.getElementById('b'); buttonB.disabled = true; if (index < chartData.length) { var x =

How to center the y-axis label horizontally in Highcharts?

由 空扰寡人 提交于 2020-01-15 05:58:06
问题 I have set the y-axis label to "align: high", that is it appears on top of the y-axis, horizontally. Now, as my title goes on two lines, I'd like to center the y-axis label. I tried it with "yaxis: { title { style { text-align: center}}}" and tried as well to put some CSS into the title. But it doesn't work. Has anyone a tip for me? Thanks a lot! 回答1: You mean title of chart or yAxis ? http://api.highcharts.com/highcharts#yAxis.title.align http://api.highcharts.com/highcharts#title.align 来源：
订阅 Highcharts