I have a Highcharts chart in my application and it supports drill down capabilities. Char is a line chart. Sample code can be seen below:
Highcharts.chart('container-main-bar', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function (e) {
}
},
},
exporting: { enabled: true },
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category',
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false,
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [
{
"name": "Australia",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "Sri Lanka",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "America",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "UK",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 10,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":80,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
}
],
"drilldown": {
activeAxisLabelStyle: {
textDecoration: 'none',
},
activeDataLabelStyle: {
textDecoration: 'none',
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: -30,
y: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
"series": [
{
"name": 'Sales by Location',
"id": 'Year0',
"data": [
{
"name": "Adelaide",
"y": 3,
"date": 2018-09-10,
"drilldown": true,
"year": 2018
},
{
"name": "Canberra",
"y": 5,
"date": 2018-08-31,
"drilldown": true,
"year": 2018
},
{
"name": "Hobart",
"y": 2,
"date": 2018-07-10,
"drilldown": true,
"year": 2018
},
{
"name": "Sydney",
"y": 5,
"date": 2018-06-30,
"drilldown": true,
"year": 2018
},
]
}
]
}
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<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>
<div id="container-main-bar"></div>
As it is a line graph there should be lines connecting each series. But in my graph I don't see those lines connecting the dots. Is there any other thing that we need to do to get the lines in the graph.
Your problem is caused by colorByPoint property, you should not use this option in line series.
Highcharts.chart('container', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function(e) {
}
},
},
exporting: {
enabled: true
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [{
"name": "Australia",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "Sri Lanka",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "America",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "UK",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 10,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 80,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
}
],
"drilldown": {
activeAxisLabelStyle: {
textDecoration: 'none',
},
activeDataLabelStyle: {
textDecoration: 'none',
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: -30,
y: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
"series": [{
"name": 'Sales by Location',
"id": 'Year0',
"data": [{
"name": "Adelaide",
"y": 3,
"date": 2018 - 09 - 10,
"drilldown": true,
"year": 2018
},
{
"name": "Canberra",
"y": 5,
"date": 2018 - 08 - 31,
"drilldown": true,
"year": 2018
},
{
"name": "Hobart",
"y": 2,
"date": 2018 - 07 - 10,
"drilldown": true,
"year": 2018
},
{
"name": "Sydney",
"y": 5,
"date": 2018 - 06 - 30,
"drilldown": true,
"year": 2018
},
]
}]
}
});
Live demo: http://jsfiddle.net/BlackLabel/gtcod176/
Related
I have a highchart in my application and I want to show how sales have been happening over past months and I want to show months of three years. SO the X axis should be something like following. Earlier I had a requirement like to show the year as a group and months of each year as sub grpups similar to following image. Grouped Categories
I achieved it through BlackLabel plugin. But now I want to check whether we can have months on the XAxix without year categorization. So only the months will be displayed on XAxix. So it should be like following second image.Is there a way to do this? Sample code is as follows.
Expected Way
Highcharts.chart('container-main-bar', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function(e) {
}
},
},
exporting: {
enabled: true
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category',
labels: {
formatter() {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false,
labels: {
formatter() {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [{
"name": "Australia",
"data": [{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
},
{
"name": "Feb",
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
},
{
"name": "Mar",
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
},
{
"name": "Apr",
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Feb",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Mar",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Apr",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Feb",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Mar",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Apr",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
}
]
}]
});
https://jsfiddle.net/Lwbmauks/32/
You can have the same category names, but you have to set:
xAxis: {
type: 'category',
uniqueNames: false
}
Live demo: http://jsfiddle.net/BlackLabel/y4xa5e7w/
API: https://api.highcharts.com/highcharts/xAxis.uniqueNames
I have a Highcharts chart in my application, it is a line graph showing the number of employees at each department for several months over several years. When user click on that series it should drill down into another line chart which shows the headcount of two sub departments of Department A which are Department A1 and Department A2. I tried adding as two series under drill down, it seems not working. What is I'm missing here.
following is a sample code,
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container-main-bar",
type: "line"
},
title: {
text: null
},
series: [{
"name": "Department A",
"data": [{
"name": "Month1",
"y": 27,
"drilldown": "levelA2"
},
{
"name": "Month2",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month3",
"y": 22,
"drilldown": "levelA2"
},
{
"name": "Month4",
"y": 26,
"drilldown": "levelA2"
},
{
"name": "Month5",
"y": 21,
"drilldown": "levelA2"
},
{
"name": "Month6",
"y": 22,
"drilldown": "levelA2"
},
{
"name": "Month7",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month8",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month9",
"y": 21,
"drilldown": "levelA2"
},
{
"name": "Month10",
"y": 20,
"drilldown": "levelA2"
},
{
"name": "Month11",
"y": 22,
"drilldown": "levelA2"
},
{
"name": "Month12",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month13",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month14",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month15",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month16",
"y": 26,
"drilldown": "levelA2"
},
{
"name": "Month17",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month18",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month19",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month20",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month21",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month22",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month23",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month24",
"y": 25,
"drilldown": "levelA2"
}
]
} ],
"drilldown": {
"series": [{
"name": 'Headcount',
"id": 'levelA2',
"data": [{
"name": "Month1",
"y": 10,
},
{
"name": "Month2",
"y": 12,
},
{
"name": "Month3",
"y": 11,
},
{
"name": "Month4",
"y": 10,
},
{
"name": "Month5",
"y": 9,
},
{
"name": "Month6",
"y": 8,
},
{
"name": "Month7",
"y": 10,
},
{
"name": "Month8",
"y": 12,
},
{
"name": "Month9",
"y": 11,
},
{
"name": "Month10",
"y": 13,
},
{
"name": "Month11",
"y": 14,
},
{
"name": "Month12",
"y": 10,
},
{
"name": "Month13",
"y": 9,
},
{
"name": "Month14",
"y": 8,
},
{
"name": "Month15",
"y": 11,
},
{
"name": "Month16",
"y": 10,
},
{
"name": "Month17",
"y": 9,
},
{
"name": "Month18",
"y": 10,
},
{
"name": "Month19",
"y": 11,
},
{
"name": "Month20",
"y": 12,
},
{
"name": "Month21",
"y": 13,
},
{
"name": "Month22",
"y": 10,
},
{
"name": "Month23",
"y": 11,
},
{
"name": "Month24",
"y": 12,
}
]
},
{
"name": 'Headcount',
"id": 'levelA2,
"data": [{
"name": "Month1",
"y": 1,
},
{
"name": "Month2",
"y": 2,
},
{
"name": "Month3",
"y": 3,
},
{
"name": "Month4",
"y": 4,
},
{
"name": "Month5",
"y": 5,
},
{
"name": "Month6",
"y":6,
},
{
"name": "Month7",
"y": 7,
},
{
"name": "Month8",
"y": 8,
},
{
"name": "Month9",
"y": 9,
},
{
"name": "Month10",
"y": 10,
},
{
"name": "Month11",
"y": 11,
},
{
"name": "Month12",
"y": 12,
},
{
"name": "Month13",
"y": 9,
},
{
"name": "Month14",
"y": 8,
},
{
"name": "Month15",
"y": 11,
},
{
"name": "Month16",
"y": 10,
},
{
"name": "Month17",
"y": 9,
},
{
"name": "Month18",
"y": 10,
},
{
"name": "Month19",
"y": 11,
},
{
"name": "Month20",
"y": 12,
},
{
"name": "Month21",
"y": 13,
},
{
"name": "Month22",
"y": 10,
},
{
"name": "Month23",
"y": 11,
},
{
"name": "Month24",
"y": 12,
}
]
}]
},
xAxis: {
categories: [{
"name": "2013",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2014",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2015",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2016",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2017",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2018",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
}
]
},
yAxis: [{ // Primary yAxis
title: {
text: 'No. of Employees'
},
}],
});
});
http://jsfiddle.net/yasirunilan/qh7zg5kn/4/
Default Highcharts drilldown does not allow multiple series to be displayed, but you can easy create own drilldown behavior:
events: {
drilldown: function(e) {
var drilldownseries = [{
"name": 'Headcount',
"id": 'levelA2',
"data": [...]
},
{
"name": 'Headcount',
"id": 'levelA2',
"data": [...]
}
]
if (!e.seriesOptions) {
chart.addSingleSeriesAsDrilldown(e.point, drilldownseries[0]);
chart.addSingleSeriesAsDrilldown(e.point, drilldownseries[1]);
chart.applyDrilldown();
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/da1vuj26/
API Reference: https://www.highcharts.com/docs/chart-concepts/drilldown
When I add the guides into valueAxesSettings but it doesn't work even I choose valueAxesSettings into valueAxes.
Furthermore, what the difference between valueAxesSettings and valueAxes, as the reference said If you change a property after the chart is initialized, you should call stockChart.validateNow() method in order for it to work.? what does it mean?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My first stock chart</title>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<style>
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
</style>
<script type="text/javascript">
AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [ {
"dataProvider": [ {
"date": "2011-06-01",
"val": 10
}, {
"date": "2011-06-02",
"val": 11
}, {
"date": "2011-06-03",
"val": 12
}, {
"date": "2011-06-04",
"val": 11
}, {
"date": "2011-06-05",
"val": 10
}, {
"date": "2011-06-06",
"val": 11
}, {
"date": "2011-06-07",
"val": 13
}, {
"date": "2011-06-08",
"val": 14
}, {
"date": "2011-06-09",
"val": 17
}, {
"date": "2011-06-10",
"val": 13
} ],
"fieldMappings": [ {
"fromField": "val",
"toField": "value"
} ],
"categoryField": "date"
} ],
"panels": [ {
"legend": {},
"stockGraphs": [ {
"id": "graph1",
"valueField": "value",
"type": "line",
"title": "MyGraph",
"fillAlphas": 0
} ]
} ],
"panelsSettings": {
"startDuration": 1
},
"categoryAxesSettings": {
"dashLength": 5
},
"valueAxesSettings": {
"dashLength": 13,
"guides": {
"value": 10,
"tovalue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true,
}
},
"chartScrollbarSettings": {
"graph": "graph1",
"graphType": "line",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 1,
"label": "1 day"
}, {
"period": "DD",
"selected": true,
"count": 5,
"label": "5 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
}
} );
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
valueAxesSettings is a global version of valueAxes - anything you set in valueAxesSettings will be applied to all stock panels' valueAxes objects. If you want to override or set a specific setting in one of your panels' valueAxes, you can set a valueAxes inside the panel:
"panels": [{
"valueAxes":[{
//settings specific to this panel
}],
// ...
}, {
"valueAxes": [{
//settings specific to this panel
}]
}
The guides property is an array. You're setting it as a single object, which is incorrect. Also, the property is called toValue, not "tovalue" - the casing is important. Here's the corrected valueAxesSettings object:
"valueAxesSettings": {
"dashLength": 13,
"guides": [{
"value": 10,
"toValue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true
}]
},
Demo:
AmCharts.makeChart("chartdiv", {
"type": "stock",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [{
"dataProvider": [{
"date": "2011-06-01",
"val": 10
}, {
"date": "2011-06-02",
"val": 11
}, {
"date": "2011-06-03",
"val": 12
}, {
"date": "2011-06-04",
"val": 11
}, {
"date": "2011-06-05",
"val": 10
}, {
"date": "2011-06-06",
"val": 11
}, {
"date": "2011-06-07",
"val": 13
}, {
"date": "2011-06-08",
"val": 14
}, {
"date": "2011-06-09",
"val": 17
}, {
"date": "2011-06-10",
"val": 13
}],
"fieldMappings": [{
"fromField": "val",
"toField": "value"
}],
"categoryField": "date"
}],
"panels": [{
"valueAxes": [{
}],
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "value",
"type": "line",
"title": "MyGraph",
"fillAlphas": 0
}]
}],
"panelsSettings": {
"startDuration": 1
},
"categoryAxesSettings": {
"dashLength": 5
},
"valueAxesSettings": {
"dashLength": 13,
"guides": [{
"value": 10,
"toValue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true
}]
},
"chartScrollbarSettings": {
"graph": "graph1",
"graphType": "line",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"periods": [{
"period": "DD",
"count": 1,
"label": "1 day"
}, {
"period": "DD",
"selected": true,
"count": 5,
"label": "5 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
}
});
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
Regarding validateNow, if you change a property in your stock chart object, you need to call validateNow to redraw the chart with your new settings. validateData is primarily used when you make changes to your dataSets/dataProvider.
According to the amCharts documentation, if bulletBorderColor isn't set, it will default to lineColor. This doesn't seem to be working. I am building a theme for my team to use so they don't have to worry about setting colors every time they generate a chart. Does anyone have a workaround, or solution for this?
CodePen:
http://codepen.io/anon/pen/MwByvL
Code:
AmCharts.makeChart("line-chart-fw", {
"type": "serial",
"theme": "sailthru",
"marginTop": 0,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 0,
"responsive": {
"enabled": true
},
"pathToImages": "js/amcharts/images/",
"graphs": [{
"title": "Yesterday",
"id": "g2",
"balloonText": "",
"type": "smoothedLine",
"valueField": "value2"
}, {
"title": "Today",
"id": "g1",
"balloonText": "<b>[[category]]</b><br><span style='font-size:11px;'>Today: [[value]]</span><br><span style='font-size:11px;'>Yesterday: [[value2]]</span>",
"type": "smoothedLine",
"valueField": "value"
}],
"chartCursor": {
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"valueLineAlpha": 0.5,
"fullWidth": true,
"categoryBalloonEnabled": false
},
"legend": {
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"marginBottom": 0,
"width": 140,
"labelText": "[[title]]",
"valueText": "",
},
"categoryField": "year",
"categoryAxis": {
"parseDates": false,
"minorGridAlpha": 0.1,
"labelsEnabled": true,
"inside": false,
},
"dataProvider": [{
"year": "12 AM",
"value": 5,
"value2": 10
}, {
"year": "1 AM",
"value": 10,
"value2": 5
}, {
"year": "2 AM",
"value": 15,
"value2": 20
}, {
"year": "3 AM",
"value": 5,
"value2": 10
}, {
"year": "4 AM",
"value": 12,
"value2": 18
}, {
"year": "5 AM",
"value": 16,
"value2": 12
}, {
"year": "6 AM",
"value": 7,
"value2": 5
}, {
"year": "7 AM",
"value": 20,
"value2": 15
}, {
"year": "8 AM",
"value": 25,
"value2": 20
}, {
"year": "9 AM",
"value": 20,
"value2": 15
}, {
"year": "10 AM",
"value": 20,
"value2": 8
}, {
"year": "11 AM",
"value": 60,
"value2": 45
}, {
"year": "12 PM",
"value": 80,
"value2": 70
}, {
"year": "1 PM",
"value": 95,
"value2": 80
}, {
"year": "2 PM",
"value": 80,
"value2": 90
}, {
"year": "3 PM",
"value": 40,
"value2": 50
}, {
"year": "4 PM",
"value": 60,
"value2": 20
}, {
"year": "5 PM",
"value2": 35
}, {
"year": "6 PM",
"value2": 20
}, {
"year": "7 PM",
"value2": 10
}, {
"year": "8 PM",
"value2": 20
}, {
"year": "9 PM",
"value2": 5
}, {
"year": "10 PM",
"value2": 5
}, {
"year": "11 PM",
"value2": 10
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"labelsEnabled": true,
"inside": true,
"ignoreAxisWidth": true,
"axisTitleOffset": 0,
"maximum": 100,
}]
});
The documentation might not be very straightforward. Technically bullet border will use line's color, but only if you do not override the bullet color with bulletColor, which you seem to be doing.
To work around that use useLineColorForBulletBorder. (set it to true)
So the relevant part of your theme file should look like this:
AmGraph: {
lineAlpha: 1,
bulletBorderAlpha: 1,
bulletColor: "#ffffff",
lineThickness: 1.5,
fillAlphas: 0.05,
bulletSize: 6,
bulletBorderThickness: 1.5,
bulletColor: "#ffffff",
bulletBorderAlpha: 1,
bullet: "round",
minorGridEnabled: false,
useLineColorForBulletBorder: true
}
P.S. I noticed you have a lot of trailing commas in your theme file (a comma after the last property in the object). While modern browsers can handle it, some older ones will fail with a syntax error. You might want to get that fixed.
Given the follow Highcharts.Chart(options)
{
"chart": {
"type": "spline"
},
"title": {
"text": "",
"x": -20
},
"subtitle": {
"text": "",
"x": -20
},
"xAxis": [
"23 Jun",
"24 Jun",
"25 Jun",
"26 Jun",
"27 Jun",
"28 Jun",
"29 Jun"
],
"yAxis": {
"title": {
"text": ""
},
"plotLines": [
{
"value": 0,
"width": 1,
"color": "#808080"
}
]
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "middle",
"borderWidth": 0
},
"series": [
{
"name": "exposed",
"data": [
100,
200,
150,
130,
180,
200,
190
],
"dashStyle": "longdash"
},
{
"name": "converted",
"data": [
90,
80,
70,
75,
70,
80,
85
],
"dashStyle": "longdash"
},
{
"name": "engaged",
"data": [
30,
40,
35,
40,
48,
30,
33
],
"dashStyle": "longdash"
}
]
}
When I draw it with - $('#container').highcharts({...}) it prompts the error -
Uncaught Highcharts error #18: www.highcharts.com/errors/18
http://www.highcharts.com/errors/18
You can see it in - jsFiddle
What is wrong with that options format ?
Define a container in the jsFiddle
there is a problème with the x axis. You have to define an object not only an array. Ex
"xAxis": {categories: [
'23 Jun',
'24 Jun',
'25 Jun',
'26 Jun',
'27 Jun',
'28 Jun',
'29 Jun'
]}
do you expect somethink like this http://jsfiddle.net/x4YbZ/ ?