Related
I have a stockchart which updates, but I'm trying to display it in the whole of the area. I can't disable the scrolbar because it stops the movement of the line chart, it is camouflaged. The working code is in this jsfiddle, any ideas how to get the line to fully fit the area? nIdeally I would be displaying the chart at 50px.
https://jsfiddle.net/garynobles/5Lsxtqu4/5/
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="time_test" style="height: 150px; min-width: 310px; border-style:solid;"></div>
<script>
// Create the chart
Highcharts.stockChart('time_test', {
chart: {
backgroundColor: '#343a40',
title: {
text: ''
},
subtitle: {
text: ''
},
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
// rangeSelector: {
// enabled: false
// },
rangeSelector: {
buttons: [{
count: 30,
type: 'minute',
text: ''
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}],
credits: {
enabled: false
},
scrollbar: {
barBackgroundColor: '#343a40',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: '#343a40',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#343a40'
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
minPadding: 0,
maxPadding: 0
},
yAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
minPadding: 0,
maxPadding: 0
},
navigator: {
enabled: false
},
});
</script
"any ideas how to get the line to fully fit the area"
Yes remove all useless options like that :
rangeSelector: {
enabled: false,
},
scrollbar: {
enabled: false,
},
Then really use all remaining space with these options :
chart: {
spacingBottom:0,
spacingTop:0,
spacingLeft:0,
spacingRight:0
},
Fiddle
I was developing a vue app using vue advanced webpack template and I didn't took much attention to IE browser but today I tried and I'm getting very odd errors.
I have a several sparkline charts rendered with Highcharts in the mount function of a component and I think the point where I have this error is here:
options = Highcharts.merge(defaultOptions, options);
I use babel-polyfill and my .babelrc configuration is this one:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true,
"debug": true
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs",
"dynamic-import-node"]
}
}
}
In webpack.base.config.js I have this loader configured:
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('i18n'), resolve('test'),
resolve('node_modules/webpack-dev-server/client')]
},
Any help will be appreciated, thanks!
Relevant Source of List.vue:
import createSmallCharts from './smallChart';
function refreshCharts(elements) {
createSmallCharts(elements);
}
...
mounted() {
const elements = this.$refs['currency-table-
body'].querySelectorAll('.table__price-graph');
refreshCharts(elements);
},
And the source for createSmallCharts
import * as Highcharts from 'highcharts/highcharts';
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function createSmallCharts(elements) {
const time = +new Date();
let stringdata;
let data;
let n = 0;
for (let i = 0; i < elements.length; i += 1) {
const element = elements[i];
stringdata = element.getAttribute('data-sparkline');
data = stringdata.split(', ').map(dataEl => parseFloat(dataEl));
Highcharts.SparkLine(element, {
series: [{
data,
pointStart: 1,
pointInterval: 24 * 3600 * 1000,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
},
}],
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3,
},
},
},
},
},
tooltip: {
formatter: () => false,
},
});
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
elements.splice(0, i + 1);
setTimeout(createSmallCharts, 0);
break;
}
}
}
export { createSmallCharts as default };
Finnaly the definition of SparkLine:
import Highcharts from 'highcharts/highcharts';
Highcharts.SparkLine = function SparkLine(...params) {
const hasRenderToArg = typeof a === 'string' || params[0].nodeName;
let options = params[hasRenderToArg ? 1 : 0];
const defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible',
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
},
title: {
text: '',
},
credits: {
enabled: false,
},
xAxis: {
labels: {
enabled: false,
},
title: {
text: null,
},
startOnTick: false,
endOnTick: false,
tickPositions: [],
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false,
},
title: {
text: null,
},
tickPositions: [0],
},
legend: {
enabled: false,
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner(w, h, point) {
return {
x: point.plotX - (w / 2),
y: point.plotY - h,
};
},
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1,
},
},
marker: {
radius: 1,
states: {
hover: {
radius: 2,
},
},
},
fillOpacity: 0.25,
},
column: {
negativeColor: '#910000',
borderColor: 'silver',
},
},
};
options = Highcharts.merge(defaultOptions, options); // I think ERROR is here
return hasRenderToArg ?
new Highcharts.Chart(params[0], options, params[2]) :
new Highcharts.Chart(options, params[1]);
};
Try to import it at the top of your main.js file like this:
import 'babel-polyfill'
At least this fixed this issue for me.
I'm trying to recreate a linear gauge chart of fusionchart in highcharts. This is the example that I am trying to recreate.
Head:
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
Body:
FusionCharts.ready(function () {
var cpuGauge = new FusionCharts({
type: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '190',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "-1.9",
"upperLimit": "4.4",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"pointerBgColor": "#000000",
"baseFontColor": "#000000",
"decimalSeparator": ",",
"forceDecimals": "1",
"decimals": "1",
"valueFontBold": "0"
},
"colorRange": {
"color": [
{
"minValue": "-1.9",
"maxValue": "-0.1",
"label": "",
"code": "#e51b1b",
},
{
"minValue": "-0.1",
"maxValue": "1.0",
"label": "",
"code": "#fa7921",
},
{
"minValue": "1.0",
"maxValue": "1.5",
"label": "",
"code": "#fde74c",
},
{
"minValue": "1.5",
"maxValue": "4.4",
"label": "",
"code": "#9bc53d",
}
]
},
"pointers": {
"pointer": [
{
"value": "2"
}
]
},
}
})
.render();
});
The highcharts chart must take over the following properties:
Negative values
At least 4 groups (colors)
Pointer (indication marker) with number at top
In addition, I would really appreciate if there is an animation where you can see the pointer moving.
The bullet graph from highcharts comes closest to the fusionchart. I have made a first step (example) with this graph
Head:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>
Body:
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '200%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container1', {
chart: {
marginTop: 40
},
title: {
text: ''
},
xAxis: {
categories: "P"
},
yAxis: {
plotBands: [{
from: -1.9,
to: -0.1,
color: '#e51b1b'
}, {
from: -0.1,
to: 1,
color: '#fa7921'
}, {
from: 1,
to: 1.5,
color: '#fde74c'
}, {
from: 1.5,
to: 4.4,
color: '#9bc53d'
}],
labels: {
format: '{value}%'
},
title: null
},
series: [{
data: [{
y: 0,
target: 2
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
CSS:
#container1 {
max-width: 800px;
height: 115px;
margin: 1em auto;
}
But encounter a number of problems:
Negative numbers are not working
Pointer
Maximum is not shown (stops before 4.4)
With reference to this post. I have modified this chart with yAxis.tickPositioner and min, max property of yAxis
$(function () {
/**
* Highcharts Linear-Gauge series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
wrap = H.wrap,
each = H.each;
defaultPlotOptions.lineargauge = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.lineargauge = H.extendClass(columnType, {
type: 'lineargauge',
//inverted: true,
setVisible: function () {
columnType.prototype.setVisible.apply(this, arguments);
if (this.markLine) {
this.markLine[this.visible ? 'show' : 'hide']();
}
},
drawPoints: function () {
// Draw the Column like always
columnType.prototype.drawPoints.apply(this, arguments);
// Add a Marker
var series = this,
chart = this.chart,
inverted = chart.inverted,
xAxis = this.xAxis,
yAxis = this.yAxis,
point = this.points[0], // we know there is only 1 point
markLine = this.markLine,
ani = markLine ? 'animate' : 'attr';
// Hide column
point.graphic.hide();
if (!markLine) {
var path = inverted ? ['M', 0, 0, 'L', -5, -5, 'L', 5, -5, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -5, -5, 'L', -5, 5,'L', 0, 0, 'L', xAxis.len, 0];
markLine = this.markLine = chart.renderer.path(path)
.attr({
fill: series.color,
stroke: series.color,
'stroke-width': 1
}).add();
}
markLine[ani]({
translateX: inverted ? xAxis.left + yAxis.translate(point.y) : xAxis.left,
translateY: inverted ? xAxis.top : yAxis.top + yAxis.len - yAxis.translate(point.y)
});
}
});
})(Highcharts);
$('#container').highcharts({
chart: {
type: 'lineargauge',
inverted: true
},
title: {
text: 'A Horizontal Linear Gauge'
},
xAxis: {
lineColor: '#C0C0C0',
labels: {
enabled: false
},
tickLength: 0,
},
yAxis: {
min: -1.9,
max: 4.4,
tickPositions: [-1.9, -0.1,1,1.5 ,4.4],
tickLength: 1,
tickWidth: 1,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 1,
minorTickInterval: 5,
minorTickWidth: 1,
minorTickLength: 5,
minorGridLineWidth: 0,
startOnTick: true,
endOnTick: true,
title: null,
labels: {
format: '{value}%'
},
plotBands: [{
from:-1.9,
to: -0.1,
color: 'rgba(229, 27, 27, 1)'
}, {
from: -0.1,
to: 1.0,
color: 'rgba(250, 121, 33, 1)'
}, {
from: 1.0,
to: 1.5,
color: 'rgba(253, 231, 76, 1)'
},
{
from: 1.5,
to: 4.4,
color: 'rgba(155, 197, 61, 1)'
}]
},
legend: {
enabled: false
},
series: [{
data: [1.1],
color: '#000000',
dataLabels: {
enabled: true,
align: 'center',
format: '{point.y}%',
y: 10,
}
}]
}, // Add some life
function (chart) {
setInterval(function () {
Highcharts.each(chart.series, function (serie) {
var point = serie.points[0],
newVal,
inc = (Math.random() - 0.5) *10;
newVal = point.y + inc;
if (newVal < -1.9 || newVal > 4.4) {
newVal = point.y - inc;
}
point.update(Math.floor(newVal));
});
}, 2000);
});
});
Fiddle demo
I'm new to highcharts, but I seem to have an issue with the display of the large heatmap. The colors in the legend don't seem to match the colors in the actual chart.
The following is my chart configuration code.
function load_team_effort_by_day_of_week_heat_map(ele, config)
{
var self = $(ele);
var days = ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"]
load_data(self, function(response)
{
var div = $("<pre/>")
.attr("id","csv")
.css("display","none");
div.html(response.data);
$("body").append(div);
var chart_container = self.attr("chart-container");
$("#"+chart_container).css("width","100%");
var min = new Date(response.min)
var max = new Date(response.max)
var max_value = response.max_range
var mid_range = parseFloat(max_value/4);
Highcharts.chart(chart_container, {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: '',
align: 'left',
x: 40
},
subtitle: {
text: '',
align: 'left',
x: 40
},
xAxis: {
title: {
text: config.xlabel
},
type: 'datetime',
min: Date.UTC(min.getFullYear(), min.getMonth(), min.getDate()),
max: Date.UTC(max.getFullYear(), max.getMonth(), max.getDate()),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%b-%d-%Y}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: config.ylabel
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 1, 2, 3, 4, 5, 6],
tickWidth: 1,
min: 0,
max: 6,
reversed: true
},
colorAxis: {
stops: [
[0, '#EEEEEE'],
[mid_range, '#00ee33'],
[max_value, '#00ee33']
],
min: 0,
max: max_value,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}'
}
},
tooltip: {
formatter: function () {
var d = new Date(this.point.x)
var todate=d.getDate();
var tomonth=d.getMonth()+1;
var toyear=d.getFullYear();
var original_date=tomonth+'/'+todate+'/'+toyear;
return '<b>' + original_date + ', <b>' +
this.point.value + '</b> on <br><b>' + days[this.point.y] + '</b>';
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EEEEEE',
colsize: 7 * 24 * 36e5, // one week
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});
self.parents('.white-background').removeClass("loadingdv");
self.parents('.white-background').find(".lodimg").remove();
//Remving extra div for legends on rite side
self.parents('.white-background').find(".legendcontainer").remove();
});
}
I have the charts of lib HighCharts and I want to remove the gridline of yAxis on charts
I write gridLineWidth: 0
but gridlines are not removing
All code:
<script type="text/javascript">
(function($){ // encapsulate jQuery
$(function() {
Highcharts.setOptions({
lang: {
rangeSelectorZoom: 'Маcштаб',
rangeSelectorFrom: 'От',
rangeSelectorTo: 'До',
thousandsSep: ' '
},
global: {
useUTC: false
}
});
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
borderColor: 'white',
renderTo : <?php echo "cont".$i; ?>,
backgroundColor: '#f9f9f9' // Сделаем слегка серый фон
},
rangeSelector: {
buttons: [
{
type: 'week',
count: 1,
text: 'Неделя',
},
{
type: 'month',
count: 1,
text: 'Месяц',
},
{
type: 'year',
count: 1,
text: 'Год'
},
{
type: 'all',
text: 'Всё'
}],
inputDateFormat: '%d.%m.%Y', // Меняем на привычный для нас формат даты в интервалах
inputEditDateFormat: '%d.%m.%Y',
buttonTheme: {
width: 43 // Увеличим ширину кнопки
},
selected: 1 // Какая кнопка выбрана по умолчанию
},
yAxis: [{
gridLineWidth: 0,
plotBands: [{
color: 'rgba(1, 143, 189, 1)',
from: -2,
to: 11
},
{
color: 'rgba(157, 200, 5, 1)',
from: 11,
to: 21
},
{
color: 'rgba(202, 1, 94, 1)',
from: 21,
to: 50
}],
title: {
text: 'Позиции'
},
startOnTick: false,
// min: 1,
showFirstLabel: true,
showLastLabel: true,
reversed: true,
tickPositioner: function(min, max) {
// specify an interval for ticks or use max and min to get the interval
var interval = Math.round((max-min)/5);
// push the min value at beginning of array
var dataMin=this.dataMin;
var dataMax=this.dataMax;
var positions = [dataMin];
var defaultPositions = this.getLinearTickPositions(interval, dataMin, max);
//push all other values that fall between min and max
for (var i = 0; i < defaultPositions.length; i++) {
if (defaultPositions[i] > dataMin && defaultPositions[i] < dataMax) {
positions.push(defaultPositions[i]);
}
}
// push the max value at the end of the array
positions.push(dataMax);
return positions;
},
//changed min valuereversed: true
}],
navigator: {
enabled: false,
maskFill: 'rgba(255, 255, 255, 0.45)',
//margin: 20,
series: {
type: 'areaspline',
color: 'rgba(255, 255, 255, 0.00)',
fillOpacity: 0.4,
dataGrouping: {
smoothed: false
},
lineWidth: 2,
lineColor: '#e9cc00',
marker: {
enabled: false
},
shadow: true
},
yAxis: {
reversed: true
}
},
xAxis : {
gridLineWidth: 0,
type: 'datetime',
title : {
text : ' '
},
},
title : {
//text : 'Позиции сайта'
},
legend: {
enabled: true,
align: 'center',
itemWidth: 234, // указал ширину, чтобы выводились сайты в 4 колонки
verticalAlign: 'top'
},
series : [{
lineColor: 'white',
name : 'Позиция в яндексе',
id : 'dataseries',
data : <?php echo $d ?>,
tooltip: {
backgroundColor: 'rgba(250, 250, 250, .85)', // Фон немного темнее
borderColor: 'rgba(100, 100, 100, .90)', // Цвет границы (по умолчанию меняется автоматом)
xDateFormat: '%d.%m.%Y %H:%M', // Наш формат даты
// Тут немного увеличиваем размер даты
headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>',
// Формат надписей в подсказке, названия цветом графика, а значения жирным
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
//valueDecimals: 2
}
}]
});
});
});
})(jQuery);
</script>
The problem is not the gridLineWidth. You've set that correctly.
In addition you need to set the minorGridLineWidth that you have to set to 0
Working demo
If you doesn't want to touch the config object, you just hide the grid by css:
.chart-container .highcharts-grid {
display: none;
}
you just need to gridLineWidth set to 0
yAxis: {
min:0,
categories: ["","Low","Medium","High"],
tickWidth: 0,
crosshair: false,
lineWidth: 0,
gridLineWidth:0,//Set this to zero
title: '',
labels: {
formatter: function () {
return this.value;labels
}
},
showEmpty: false
}
None of the mentioned solutions worked for me, so this one finally worked (taken from Sparklines examples: https://www.highcharts.com/demo/sparkline):
yAxis: {
startOnTick: false,
endOnTick: false,
tickPositions: [],
}
for all other lines here is what worked for me, in some cases using line transparency as the color was the only solution I could find.
$(function() {
$('#container').highcharts({
colors: ['#00f900', '#ffff3c', '#ff2600'],
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
itemDistance: 60
},
lineColor: 'red',
chart: {
type: 'column',
backgroundColor: 'transparent'
},
title: {
text: ''
},
legend: {
itemStyle: {
color: 'white',
fontWeight: 'normal',
fontFamily: 'helvetica',
fontSize: '12px'
}
}
// ....rest in js fiddle
http://jsfiddle.net/fv50sLkj/23/