Related
In a project, I want to work with Highcharts, but instead of putting the options code directly on to the website I rather would like to see it in an extra file, e.g. charts.js. Is it possible?
What I have done so far:
I created the general chart and it works. I tried to put the options code as shown on Highcharts in a file called charts.js and include it into the header. But it doesn't work, shows an error #13.
The code I used was
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
Is there a way to put the code into a fail and let it work as it would if code, CDN and Co. are on one page? Or is there anything I do wrong?
Highcharts error #13 means that Highcharts is unable to find the HTML element to render the chart in. From your description it looks like your script is fired before DOM is fully loaded. As a solution put all your code from chart.js file into DOMContentLoaded event callback function:
window.addEventListener('DOMContentLoaded', (event) => {
// chart.js
});
Or just put your script before the closing </body>:
<html>
....
<body>
....
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
I wan't to create a heatmap for different days and months, but i run into a problem that xAxis doesn't change when i add aditional element in array it can have only 10 elements but i need 12.
The same problem with yAxis that is only 5 elements, but i need to add 7 in total.
After adding another element to X or Y axis - nothing happening.
JSFiddle included - https://jsfiddle.net/nw6ux40e/
JS below.
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura', 'Michi']
},
yAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'],
title: null,
reversed: true
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
}); ```
If you want to use categories you will need to add the new values to the category array.
Next, you will need to add wanted points. Notice that array looks like this: [x, y, value], so if you want to increase the yAxis labels you will need to add an additional point for each category.
Demo: https://jsfiddle.net/BlackLabel/8pts76bn/
Data example:
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[0, 5, 67],
API: https://api.highcharts.com/highcharts/series.heatmap.data
I have Highcharts 7.0.1 installed in my Angular 6 app via npm and already have a lot of basic charts running (line, spline, bar, etc). When trying to follow the Highcharts docs on initialising the heatmap lib, I get the following error set:
ERROR in src/app/modal-chart.service.ts(224,69): error TS2345: Argument of type '{ chart: { type: "heatmap"; marginTop: number; marginBottom: number; plotBorderWidth: number; }; ...' is not assignable to parameter of type 'Options'.
Types of property 'series' are incompatible.
Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'.
Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | ...'.
Type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...' is not assignable to type 'SeriesZigzagOptions'.
Property 'type' is missing in type '{ name: string; borderWidth: number; data: [number, number, number][]; dataLabels: { enabled: tru...'.
src/app/modal-chart.service.ts(256,48): error TS2339: Property 'categories' does not exist on type 'Axis'.
src/app/modal-chart.service.ts(257,30): error TS2339: Property 'value' does not exist on type 'Point'.
src/app/modal-chart.service.ts(257,82): error TS2339: Property 'categories' does not exist on type 'Axis'.
Ive tried the solution from a highcharts support thread - https://www.highcharts.com/forum/viewtopic.php?t=35781
but this produces the same error.
Ive removed other charts to reduce the noise. Any and all help is greatly appreciated
import { Injectable } from '#angular/core';
import { DataApiService } from './data-api.service';
import * as Highcharts from 'highcharts';
import { MetricFilter } from "./models/metricFilter.model";
import Heatmap from 'highcharts/modules/heatmap.js';
Heatmap(Highcharts);
declare let $:any;
#Injectable({
providedIn: 'root'
})
export class ModalChartService {
charts = new Array(); //rendered charts
chartsData; //use to reload original chart data
chartBaseName = "chart-id";
currentMetric;
modalContentElement = "#modal-launch .overlay-content";
constructor(private dataApiService : DataApiService) { }
/**
* Load charts from metric payload
*
* #param {Object} metric metric payload
*/
loadCharts (metric, filter = new MetricFilter) {
let _self = this;
_self.currentMetric = metric;
//get chart data with metric ID
_self.dataApiService.getCharts(metric.metricId, filter)
.subscribe( payload => {
_self.chartsData = payload.charts;
$(_self.modalContentElement).html('');
$.each(_self.chartsData, function(index, chart){
switch(chart.chartType) {
case 'double':
_self.charts.push(_self.createDoubleChart(chart));
break;
case 'heat-map':
_self.charts.push(_self.createHeatMapChart(chart));
break;
case 'horizontal-bar':
_self.charts.push(_self.createHorizontalBarChart(chart));
break;
case 'line':
_self.charts.push(_self.createLineChart(chart));
break;
case 'spline':
_self.charts.push(_self.createSplineChart(chart));
break;
case 'tabular':
_self.charts.push(_self.createTabularChart(chart));
break;
case 'vertical-bar':
_self.charts.push(_self.createVerticalBarChart(chart));
break;
}
});
$('.highcharts-xaxis-grid path:last').remove();
$('#modal-launch').modal('show');
}, error => {
console.error(error);
});
}
/**
* Build and display Highcharts chart from payload data
*
* #param {Object} metric metric payload
* #return {Object} highcharts highcharts object
*/
private createHeatMapChart(chart){
$(this.modalContentElement).append("<div id='" + this.chartBaseName + chart.chartId + "' class='chart-heat-map chart'></div>");
return new Highcharts.Chart(this.chartBaseName + chart.chartId, {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
}
}
Chart Type needed to be defined in the series:
{
chart: {
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
type: 'heatmap',
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
}
I have plotted a heatmap using highchart , but i wanted to give color range for y axis ie 2nd index in the data array but it takes 3rd index automatically.
Below is the jsfiddle code.
Links for my code
colorAxis: {
dataClasses: [{
from: 0,
to: 10,
color: 'rgb(191, 27, 0)'
},{
from:10,
to:30,
color:'rgb(234, 100, 96)'
},{
from:30,
to:100,
color:'rgb(242, 201, 109)'
},{
from:100,
color:'rgb(98, 158, 81)'
}]
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 99], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
The actual data is in below format
data: [[0, 0, 10], [0, 1, 19]]
Now range is plotted on the base of 2nd index ie 10,19 but i want to plot based on 1st index ie 0,1.
Change the default name of the property (of point object) that'll be used to compute the color :
Highcharts.seriesTypes.heatmap.prototype.colorKey = 'x'; // 'value' by default
Live demo: http://jsfiddle.net/BlackLabel/z3b1Lcqg/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I got stuck while creating the density heatmap chart using highcharts.js.
I am able to create a heatmap chart but the heatmap chart does not fit to the entire width. I am expecting the my heatmap chart to look like the below screenshot. Any help will be much appreciated. Also, please suggest any other plugins to meet the expected behavior.
Thanks in Advance.
[]
HTML
<div id="container" style="height: 400px; max-width: 400px; margin: 0 auto"></div>
JS
$('#container').highcharts({
chart: {
type: 'contour',
inverted: false
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura','Timd', 'Laudra'],
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
stops: [
[0, '#5974FF'],
[0.5, '#7FFF59'],
[0.9, '#FFAF59']
]
},
series: [{
borderWidth: 0,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91],[10, 0, 47], [10, 1, 114], [10, 2, 31], [10, 3, 48], [10, 4, 91]],
tooltip: {
headerFormat: 'Temperature<br/>',
pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
}
}]
});
The code is in JSFiddle here.
From my personal experiences with Highcharts, you have to explicitly define a width for your container div, whether that's a percentage or a fixed pixel width. max-width seems to be treated as an option (often overlooked) vs. a command. I hope this is helpful for you.