Related
My code is as follows;
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango",
"count": "twenty"
},
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple",
"count": "ten"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60","0", "post_60", "post_90", "post_120"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"sort": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
]
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3 ,
"strokeDash": [6, 4]},
"encoding": {
"x": { "datum": "0" }
}
}
]
}
Below is the link to the vega editor.
https://vega.github.io/editor/#/gist/947b2a99801bc6a08d468cdb9acbeb50/legend.json
My aim is to show the legend to include value of 2 fields i.e. type and count fields with a hyphen.
Example :
In the image below, I wanted to show the legends as
'Apple - twenty'
and
'Mango - ten'
How could I do the same?
I would just create a new calculated field and use that.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango",
"count": "ten"
},
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple",
"count": "twenty"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]},
{"calculate": "datum.type + ' - ' + datum.count", "as": "label"}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"sort": [
"pre_120",
"pre_90",
"pre_60",
"post_60",
"post_90",
"post_120"
]
},
"y": {"field": "value", "type": "quantitative"},
"color": {
"field": "label",
"type": "nominal"
}
}
}
]
}
I have a Sentence and also an array of clickable words from the sentence. The Array does not include the punctuation marks.
Here is a sentence
Into the trunk we put two poles and the can of worms and a sack of sandwiches and a thermos of water. “We’re going on a journey,” my father said. “To a secret place. We’ll catch the air! We’ll catch the breeze!”
Here is the structure of the clickable words. It's an array containing the indexes of where within the sentence the word begins and ends. This Array does not contain the punctuation marks in the sentence
Theu punctuation marks are not clickable.
"tokens": [
{
"position": [
0,
4
],
"value": "into"
},
{
"position": [
5,
8
],
"value": "the"
},
{
"position": [
9,
14
],
"value": "trunk"
},
{
"position": [
15,
17
],
"value": "we"
},
{
"position": [
18,
21
],
"value": "put"
},
{
"position": [
22,
25
],
"value": "two"
},
{
"position": [
26,
31
],
"value": "poles"
},
{
"position": [
32,
35
],
"value": "and"
},
{
"position": [
36,
39
],
"value": "the"
},
{
"position": [
40,
43
],
"value": "can"
},
{
"position": [
44,
46
],
"value": "of"
},
{
"position": [
47,
52
],
"value": "worms"
},
{
"position": [
53,
56
],
"value": "and"
},
{
"position": [
57,
58
],
"value": "a"
},
{
"position": [
59,
63
],
"value": "sack"
},
{
"position": [
64,
66
],
"value": "of"
},
{
"position": [
67,
77
],
"value": "sandwiches"
},
{
"position": [
78,
81
],
"value": "and"
},
{
"position": [
82,
83
],
"value": "a"
},
{
"position": [
84,
91
],
"value": "thermos"
},
{
"position": [
92,
94
],
"value": "of"
},
{
"position": [
95,
100
],
"value": "water"
},
{
"position": [
103,
108
],
"value": "we're"
},
{
"position": [
109,
114
],
"value": "going"
},
{
"position": [
115,
117
],
"value": "on"
},
{
"position": [
118,
119
],
"value": "a"
},
{
"position": [
120,
127
],
"value": "journey"
},
{
"position": [
130,
132
],
"value": "my"
},
{
"position": [
133,
139
],
"value": "father"
},
{
"position": [
140,
144
],
"value": "said"
},
{
"position": [
147,
149
],
"value": "to"
},
{
"position": [
150,
151
],
"value": "a"
},
{
"position": [
152,
158
],
"value": "secret"
},
{
"position": [
159,
164
],
"value": "place"
},
{
"position": [
166,
171
],
"value": "we'll"
},
{
"position": [
172,
177
],
"value": "catch"
},
{
"position": [
178,
181
],
"value": "the"
},
{
"position": [
182,
185
],
"value": "air"
},
{
"position": [
187,
192
],
"value": "we'll"
},
{
"position": [
193,
198
],
"value": "catch"
},
{
"position": [
199,
202
],
"value": "the"
},
{
"position": [
203,
209
],
"value": "breeze"
}
]
},
Here is my code that gets the clickable words
const getWordsFromTokens = tokens.reduce((words, token)=>{
let start = token.position[0]; //Start is the first character of the token value in the sentence
let end = token.position[1]; // end is the last character of the token value in the sentence
let diffrenceBetweenLastPositionAndFirst = end+(end-start);
/* You get punctuationMarks or any characters not in the Tokens by getting the string between
the end and diffrence between the end and start
*/
let punctuationMarks = content.substring(end, (diffrenceBetweenLastPositionAndFirst));
console.log(punctuationMarks);
words.push( content.substring(start, end)+punctuationMarks); //concat with any space of pucntuation mark after the word.
return words; //<- return this to be used in next round of reduce untill all words are
},[]);
Here is How I'm rendering the text
return (
<div>
<p> {
getWordsFromTokens.map((word, index)=>{
return <a href={'/word/' + word} > {word}</a>
})
}
</p>
</div>
)
Here is my problem, When I render the text, it does not look exactly like the original text. What is it that I could be doing wrong?
Here is how the final Result looks like
Into the the tr trunk we p we p put tw two po poles and and th the ca can of of w worms and and a a sack of of s sandwiches and a the and a a thermos of wat of w water. “We We’re goin going on a on a a journey,” my f my f father said. said. “T To a a secret place place. We’ We’ll catc catch the the ai air! W We’ll catc catch the the br breeze!”
What about a solution like this? I use a cursor to track the position inside the sentence.
const tokens = [{
"position": [
0,
4
],
"value": "into"
},
{
"position": [
5,
8
],
"value": "the"
},
{
"position": [
9,
14
],
"value": "trunk"
},
{
"position": [
15,
17
],
"value": "we"
},
{
"position": [
18,
21
],
"value": "put"
},
{
"position": [
22,
25
],
"value": "two"
},
{
"position": [
26,
31
],
"value": "poles"
},
{
"position": [
32,
35
],
"value": "and"
},
{
"position": [
36,
39
],
"value": "the"
},
{
"position": [
40,
43
],
"value": "can"
},
{
"position": [
44,
46
],
"value": "of"
},
{
"position": [
47,
52
],
"value": "worms"
},
{
"position": [
53,
56
],
"value": "and"
},
{
"position": [
57,
58
],
"value": "a"
},
{
"position": [
59,
63
],
"value": "sack"
},
{
"position": [
64,
66
],
"value": "of"
},
{
"position": [
67,
77
],
"value": "sandwiches"
},
{
"position": [
78,
81
],
"value": "and"
},
{
"position": [
82,
83
],
"value": "a"
},
{
"position": [
84,
91
],
"value": "thermos"
},
{
"position": [
92,
94
],
"value": "of"
},
{
"position": [
95,
100
],
"value": "water"
},
{
"position": [
103,
108
],
"value": "we're"
},
{
"position": [
109,
114
],
"value": "going"
},
{
"position": [
115,
117
],
"value": "on"
},
{
"position": [
118,
119
],
"value": "a"
},
{
"position": [
120,
127
],
"value": "journey"
},
{
"position": [
130,
132
],
"value": "my"
},
{
"position": [
133,
139
],
"value": "father"
},
{
"position": [
140,
144
],
"value": "said"
},
{
"position": [
147,
149
],
"value": "to"
},
{
"position": [
150,
151
],
"value": "a"
},
{
"position": [
152,
158
],
"value": "secret"
},
{
"position": [
159,
164
],
"value": "place"
},
{
"position": [
166,
171
],
"value": "we'll"
},
{
"position": [
172,
177
],
"value": "catch"
},
{
"position": [
178,
181
],
"value": "the"
},
{
"position": [
182,
185
],
"value": "air"
},
{
"position": [
187,
192
],
"value": "we'll"
},
{
"position": [
193,
198
],
"value": "catch"
},
{
"position": [
199,
202
],
"value": "the"
},
{
"position": [
203,
209
],
"value": "breeze"
}
];
const content = 'Into the trunk we put two poles and the can of worms and a sack of sandwiches and a thermos of water. “We’re going on a journey,” my father said. “To a secret place. We’ll catch the air! We’ll catch the breeze!"';
let cursorPosition = 0; // set a variable to track the position of cursor
const getWordsFromTokens = tokens.reduce((words, token) => {
let tokenStart = token.position[0]; //Start is the first character of the token value in the sentence
let tokenEnd = token.position[1]; // end is the last character of the token value in the sentence
let notWordBeforeThisWord = content.substring(cursorPosition, tokenStart); // get the non-word characters (spaces, punctuation) before the current word
let tokenValue = content.substring(tokenStart, tokenEnd);; // the word value
words.push({
type: 'non-word',
value: notWordBeforeThisWord
}, {
type: 'word',
value: tokenValue
}); //concat with any space of pucntuation mark after the word.
cursorPosition = tokenEnd; // update the cursor position
return words; // return this to be used in next round of reduce untill all words are
}, []);
getWordsFromTokens.forEach(item => {
const htmlToAppend = item.type === 'word' ?
`<a href='/word/${item.value}'>${item.value}</a>` :
item.value
document.getElementById('new-sentence').innerHTML += htmlToAppend;
})
const endOfSentence = content.substring(cursorPosition); // get all carachters (if any) after the last token
document.getElementById('new-sentence').innerHTML = document.getElementById('new-sentence').innerHTML + endOfSentence;
<p id='new-sentence'></p>
I think that using RegExp would make your life easier:
const content = `Into the trunk we put two poles and the can of worms and a sack of sandwiches and a thermos of water. "We're going on a journey," my father said. "To a secret place. We'll catch the air! We'll catch the breeze!`;
const result = content.match(/([\w'])+|([\.;,:-_?!"]+[\s"]*["]*)/gim);
console.log(result);
const punctuation = /[\.;,:\-_?!"]+/;
function App() {
return (
<div>
{result.map((w) =>
punctuation.test(w) ? w : <a href={`/word/${w}`}>{w + '\n'}</a>
)}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"))
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
{
"chartOptions": {
"type": "line",
"isStacked": false,
"minValue": 0,
"maxValue": 600000,
"filled": false,
"showAxis": true,
"chartLabels":[
"May 23",
"May 24",
"May 25",
"May 26",
"May 27",
"May 28"
],
"chartDatasets": [
{
"label": "Mentions",
"backgroundColor": "rgb(81, 45, 168)",
"stack": "Stack 0",
"data": [
1100,
800,
750,
1200,
400,
600
]
}
]
},
Thats the original array I have from backend and now I want to build something like this:
const data = { labels: ['May 23', 'May 24', 'May 25', 'May 26', 'May 27', 'May 28'], datasets: [{ label: 'Mentions', borderDash: [5, 3], data: [6500, 5900, 8000, 8100, 5600, 10000] }] }
So the chartDatasets will be datasets and the chartLabels will be labels.. I think this is pretty easy but I don't know how I can do it.
I'm saving the original array in state so..
Thanks
If you have to modify single time you can simply assign in object like this:
const data = {
"chartOptions": {
"type": "line",
"isStacked": false,
"minValue": 0,
"maxValue": 600000,
"filled": false,
"showAxis": true,
},
"chartLabels":[
"May 23",
"May 24",
"May 25",
"May 26",
"May 27",
"May 28"
],
"chartDatasets": [
{
"label": "Mentions",
"backgroundColor": "rgb(81, 45, 168)",
"stack": "Stack 0",
"data": [
1100,
800,
750,
1200,
400,
600
]
}
]
}
const modifiedData = {
labels:data.chartLabels,
datasets:data.chartDatasets,
}
console.log(modifiedData)
updated according to your requirement adding extra key in data set.
const data = {
"chartOptions": {
"type": "line",
"isStacked": false,
"minValue": 0,
"maxValue": 600000,
"filled": false,
"showAxis": true,
},
"chartLabels":[
"May 23",
"May 24",
"May 25",
"May 26",
"May 27",
"May 28"
],
"chartDatasets": [
{
"label": "Mentions",
"backgroundColor": "rgb(81, 45, 168)",
"stack": "Stack 0",
"data": [
1100,
800,
750,
1200,
400,
600
]
}
]
}
const modifiedData = {
labels:data.chartLabels,
datasets:data.chartDatasets.map(set => ({...set, yAxisID:"bar-y-axis"})),
}
console.log(modifiedData)
This could be the easiest thing to do.
const MainData = {
"chartOptions": {
"type": "line",
"isStacked": false,
"minValue": 0,
"maxValue": 600000,
"filled": false,
"showAxis": true,
},
"chartLabels":[
"May 23",
"May 24",
"May 25",
"May 26",
"May 27",
"May 28"
],
"chartDatasets": [
{
"label": "Mentions",
"backgroundColor": "rgb(81, 45, 168)",
"stack": "Stack 0",
"data": [
1100,
800,
750,
1200,
400,
600
]
}
]
}
// converting it to required format
const RequiredData = {
labels:MainData.chartLabels,
datasets:MainData.chartDatasets,
}
// output
console.log(RequiredData)
if I understand correctly, you should do something like this to create your custom object
const data = {};
data.labels = YOUR_STATE.chartOptions.chartLabels;
const dataArray = [];
for(let i=0; YOUR_STATE.chartDatasets.length; i++){
dataArray.push({
label: YOUR_STATE.chartDatasets[i].label,
borderDash: [5, 3],
data: YOUR_STATE.chartDatasets[i].data
})
}
data.datasets = dataArray;
maybe has an option more optimized, but I thinks this will work for you
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/
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.