Related
I am working on highcharts polar-spider . I have spent around 5 hours to find the solution to color the lines and make it think but i can't able to find the solution. So finally here so please help.
Please check below image so you can get idea about which lines i am talking about.
Adding these properties to xAxis and yAxis worked for me
gridLineWidth - To control the width of the line and
gridLineColor - To change the color of the line
Demo & Code:
https://jsfiddle.net/ajLyxc8r/
You're looking for gridLineColor, which can be set for each axis of the line chart:
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
accessibility: {
description: 'A spiderweb chart compares the allocated budget against actual spending within an organization. The spider chart has six spokes. Each spoke represents one of the 6 departments within the organization: sales, marketing, development, customer support, information technology and administration. The chart is interactive, and each data point is displayed upon hovering. The chart clearly shows that 4 of the 6 departments have overspent their budget with Marketing responsible for the greatest overspend of $20,000. The allocated budget and actual spending data points for each department are as follows: Sales. Budget equals $43,000; spending equals $50,000. Marketing. Budget equals $19,000; spending equals $39,000. Development. Budget equals $60,000; spending equals $42,000. Customer support. Budget equals $35,000; spending equals $31,000. Information technology. Budget equals $17,000; spending equals $26,000. Administration. Budget equals $10,000; spending equals $14,000.'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
gridLineColor:'#00ff00',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
gridLineColor:'#00ff00',
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
pane: {
size: '70%'
}
}
}]
}
});
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 700px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
A spiderweb chart or radar chart is a variant of the polar chart.
Spiderweb charts are commonly used to compare multivariate data sets,
like this demo using six variables of comparison.
</p>
</figure>
(example above based on the Highcharts Spiderweb Demo)
I am using high charts https://www.highcharts.com/ for making a combination chart of Jump line and Column chart. High charts do not have such type for jump line charts . Can anyone have better solution?
How can I integrate jump line chart with column chart using high charts ?
This is what I need to make ...
Combo Chart
Here's the code I am using
Highcharts.chart("container", {
title: {
text: "Combination chart"
},
plotOptions: {
column: {
borderRadius: 5
},
series: {
marker: {
enabled: false
}
}
},
xAxis: {
categories: ["PU", "EK", "EY", "BR", "MS", "DL", "JL", "BA", "NZ", "CV"]
},
labels: {
items: [
{
// html: 'Total fruit consumption',
style: {
left: "50px",
top: "18px",
color:
// theme
(Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color) ||
"black"
}
}
]
},
series: [
{
// max:0,
pointWidth: 7,
type: "column",
name: "TP",
lineWidth: 8,
data: [10, 45, 15, 95, 10, 100, 75, 20, 66, 55]
},
{
type: "column",
name: "1S",
pointWidth: 7,
data: [13, 25, 50, 75, 100, 60, 25, 50, 75, 100],
// yAxis: 1
},
{
type: "column",
name: "1A",
pointWidth: 7,
data: [13, 20, 50, 75, 100, 40, 28, 51, 95, 100],
// yAxis: 1
},
{
type: "line",
name: "LYTP",
data: [10,10,null,80,80,null,90,90,null,103,103],
// dashStyle: "longdash",
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
fillColor: "lightblue"
}
},
{
// type: 'pie',
// name: 'Total consumption',
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
]
});
.highcharts-strong {
font-weight: bold;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 600px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Timeline charts are used to place events on a time axis,
such as this example showing the major space exploration
events from 1951 to 1975.
</p>
</figure>
There is no a series in Highcharts which perfectly meets your requirements in this case, but you can easily create such. It is enough to slightly modify the column series:
(function(H) {
H.seriesType('jump-line', 'column', {
height: 6
}, {
translate: function() {
H.seriesTypes.column.prototype.translate.apply(this);
this.points.forEach(function(point) {
point.shapeArgs.height = this.options.height;
}, this);
}
});
}(Highcharts));
Highcharts.chart('container', {
...,
series: [..., {
type: 'jump-line',
pointPadding: 0,
grouping: false,
data: [4, 4, 4]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/x3rtdzc0/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.seriesType
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I've got a project where I'm putting together a graph with some example sample data. I need to format the legend in a specific way such that I couldn't use Chart.JS's, so I implemented a custom HTML version. See the example below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<span id="js" class="chart-legend"> </span>
<div id="js-legend" class="chart-legend">
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
margin-top: 1.25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
margin-top: 1em;
margin-left: 10%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>
The content needs to be responsive, which is where I run into trouble. The line depicting the color of the 'steady state' data should be aligned on the vertical center-line of the label. If you resize the window, it shifts vertically. I can't figure out how to tie the margin-top distance of the line element to that of the 'steady state' element's.
Try this. I have made some changes in your "#js" and "#js-legend" and also have enclosed them in one div.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<div id="enclosed-js">
<span id="js" class="chart-legend"> </span>
<span id="js-legend" class="chart-legend"></span>
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#enclosed-js{
position: relative;
margin-top: 1.25%;
margin-left: 10%;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
margin-left: 2.1em;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
position:absolute;
top: 50%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>
I'm trying to create a mapping website for my thesis. I got this sample from high-maps, and it works.
// Prepare random data
var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]
];
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have a map file which is located in my local data, so I want to change the existing map with mine and also change the random data. I try to change the $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) with $.getJSON('3312kec.geojson', function (geojson).
// Prepare random data
var data = [
['010', 728],
['020', 710],
['030', 963],
['040', 541],
['050', 622],
['060', 866],
['070', 398],
['080', 785],
['090', 223],
['100', 605],
['110', 237],
['120', 157],
['130', 134],
['140', 136],
['150', 704],
['160', 398],
['170', 785],
['180', 223],
['190', 605],
['200', 237],
['201', 157],
['210', 134],
['220', 136],
['230', 704],
['240', 361]
];
$.getJSON('3312kec.geojson', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have tried various ways but always failed. Is there someone who can help me?
I am using Highmaps to plot a map on my webpage. I want to disable any kind of zooming, for ex:
Through zoom in zoom out buttons.
Through scroll.
Pinch to zoom.
On touch devices.
Multiple clicks to zoom in.
I have tried this:
chart:{
pinchType : 'none',
zoomType : 'none'
}
and this:
mapNavigation:{
enableButton:false,
enableDoubleClickZoom:false,
enableDoubleClickZoomTo:false,
enableMouseWheelZoom:false,
enableTouchZoom:false
},
but no luck.
Try this demo
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'Zoom in on country by double click'
},
mapNavigation: {
enabled: false,
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series: [{
data: data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="max-width: 1000px"></div>
jsfiddle demo : http://jsfiddle.net/geogeorge/ssh63xhb/