We Keep Coding

new to highchart and stuck with type datetime , data not plot

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

How to change color of shaded area in highcharts

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.

Highcharts line style change

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)

Jump Line charts in High Charts

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

styling axis labels in a metricsgraphics chart

I've created a metricsgraphics chart and attempted to increase the font size of the axis labels: http://jsfiddle.net/hk63jfg3/1/
My js:
MG.data_graphic({
title: "sightings",
data: [{
'date': new Date('2014-10-28'),
'value': 7
}, {
'date': new Date('2014-11-01'),
'value': 12
}, {
'date': new Date('2014-11-02'),
'value': 18
}],
width: 400,
height: 250,
target: '#sightings',
x_accessor: 'date',
y_accessor: 'value',
});
and CSS:
.mg-x-axis text, .mg-y-axis text, .mg-histogram .axis text {
font-size: 1.5rem;
}
The year and month are colliding, is there a way to fix this via CSS or better chart options?

Using CSS
You can position the year-marker by using transform: translate(x,y).
You can style the text with all properties listed in the W3C specification,
e.g. making it bold or changing the color:
text {
font-weight: bold;
fill: rebeccapurple;
font-size: 30px;
}
If the year-marker collides with a month-marker seperate them with translate(0,10px) and make the year-marker visible with:
svg {
overflow: visible !important;
}
$(function () {
MG.data_graphic({
title: "sightings",
data: [{
'date': new Date('2014-10-28'),
'value': 7
}, {
'date': new Date('2014-11-01'),
'value': 12
}, {
'date': new Date('2014-11-02'),
'value': 18
}],
width: 400,
height: 250,
target: '#sightings',
x_accessor: 'date',
y_accessor: 'value',
});
});
$(".mg-year-marker text").attr("fill", "red");
.mg-x-axis text, .mg-y-axis text, .mg-histogram .axis text {
font-size: 1.5rem;
}
svg {
overflow: visible !important;
height: 300px;
}
g.mg-year-marker {
transform: translate(100px, 15px);
}
g.mg-year-marker text {
font-size: 2rem;
fill: rebeccapurple;
font-weight: bold;
}
<link href="http://metricsgraphicsjs.org/css/metricsgraphics.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://metricsgraphicsjs.org/js/metricsgraphics.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id='sightings'></div>
</body>
Using Javascript
You can always get the inner DOM of an SVG element with document.getElementById("my-svg-id").contentDocumentand manipulate the text-elements by setting their attributes.
E.g. making a marker red by using setAttribute("fill","red");) within the svg-dom.
But in your case the svg is in an iframe, which you can't access because of the same-origin-policy.