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)
Related
I am trying to understand from this demo
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series
by changing only data and run it , But it not working , from my understand datetime type it should be millisecond right ?
This test data is select from mysql by using command UNIX_TIMESTAMP(dateTime_Field)*1000
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: '[[1015174800000, 62], [1044810000000, 86], [1081011600000, 147], [1110819600000, 177], [1137344400000, 408], [1191258000000, 1612], [1221411600000, 960], [1240160400000, 960], [1291395600000, 6833], [1319043600000, 2952], [1332262800000, 3746], [1366995600000, 5612], [1417971600000, 8662], [1442250000000, 6504], [1482166800000, 15010], [1512838800000, 8168], [1526662800000, 10439], [1559581200000, 33594], [1580922000000, 22307], [1614186000000, 25955]]'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
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/data.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">
Highcharts has extensive support for time series, and will adapt
intelligently to the input data. Click and drag in the chart to zoom in
and inspect the data.
</p>
</figure>
Your data structure looks correct, but you need to use an array instead of a string. You can use JSON.parse to convert.
series: [{
type: 'area',
name: 'USD to EUR',
data: JSON.parse('[[1015174800000, 62], [1044810000000, 86], ...]')
}]
Live demo: https://jsfiddle.net/BlackLabel/w9vfut1k/
API Reference: https://api.highcharts.com/highcharts/series.area.data
I want same color of line and area of a time series chart in highcharts. I am attaching the link of jsfiddle
here the shaded area and line color of chart is blue but i want with this hex code #70843A. can anyone help me? https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series
Highcharts.getJSON(
"https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json",
function (data) {
Highcharts.chart("container", {
chart: {
zoomType: "x",
},
title: {
text: "USD to EUR exchange rate over time",
},
subtitle: {
text:
document.ontouchstart === undefined
? "Click and drag in the plot area to zoom in"
: "Pinch the chart to zoom in",
},
xAxis: {
type: "datetime",
},
yAxis: {
title: {
text: "Exchange rate",
},
},
legend: {
enabled: false,
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba"),
],
],
},
marker: {
radius: 2,
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1,
},
},
threshold: null,
},
},
series: [
{
type: "area",
name: "USD to EUR",
data: data,
},
],
});
}
);
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
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/data.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">
Highcharts has extensive support for time series, and will adapt
intelligently to the input data. Click and drag in the chart to zoom in and
inspect the data.
</p>
</figure>
If I understand the question right, you don't want that gradient.
Highcharts offers it, and its in your working example, specifically
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba"),
],
],
}
This can be updated, towards the end with the setOpacity..
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(1).get('rgba')]
As it says, you just set the opacity to 1. Full block colour.
If you just want to change the colour itself, you can just set the fill colour to a CSS colour..
fillColor: '#FF0000',
Ugly Red JSfiddle
Documentation is here : Highcharts Documentation
And if you want the line colour etc set to the HEX you metnioned.
You can set lineColor in the marker ..
Green LineColour
The documentation is very well laid out.
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 have a scenario as something similar to this.
https://jsfiddle.net/31om2f6d/
Note that the data plotted in x-axis and data inside series is a list of 50 values (in this example, I have mentioned 6 values.) I need to drilldown into another three line charts which indicates the sum of the counts.
For example, Point 50 in 2019.1 will be split into three points say(10,10,30) in the drilldown. Similarly the rest of the points as well.As a result, there should be 3 line charts when I drilldown from linechart of main page. Kindly help me out with this function. (The values for the drilldown is in the form of list as well.)
Note: I have been reading in forum like drilldown can be done only in point mapping and not when mapped in series. I am not sure if that is the exact behaivour. If so, kindly let me know how we can map a series of 50 dynamic data by points and drilldown from there.
Any help is appreciated. Thanks in Advance.
Highcharts.setOptions({
colors: [
'#470303', '#c40a0a', '#a34d4d', '#eda4a4'
]
});
Highcharts.chart('container-trend', {
chart: {
type: 'line',
},
title: {
text: 'Trend'
},
exporting: {
tableCaption: false,
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: [2019.1, 2019.2, 2019.3, 2019.4, 2019.5, 2019.6]
},
yAxis: {
title: {
text: 'Counts '
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{
name: 'Total Counts',
data: [50,70,30,40,50,20]
}]
});
.highcharts-figure, .highcharts-data-table table {
min-width: 360px;
max-width: 800px;
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/series-label.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-trend" style="min-width: 310px; height: 320px; margin: 0 auto"></div>
</figure>
Would you like to achieve something like here: https://jsfiddle.net/BlackLabel/f4bvud2q/?
series: [{
name: 'Total Counts',
data: [{y: 50, drilldown: '2019.1'},70,30,40,50,20]
}],
drilldown: {
series: [{
name: '2019.1',
id: '2019.1',
data: [10, 10, 30]
}]
}
API: https://api.highcharts.com/highcharts/drilldown.series
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/