How to change line color when loading static csv data into Highcharts Highstock graph?
Question
The following code plots static csv into Highstock chart in my browser. How do I change the color of the plot lines? The lines show up in the legend with labels ADJ_HIGH and ADJ_LOW.
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart'
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
}
});
</script>
</body>
</html>
1 answers
solution1
4 ACCPTED 2019-12-25 16:55:53
To change the color of the line you should use the following code:
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
so change your script into following:
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart',
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
},
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to change color of single column in Highcharts column graph when data is in CSV form?
Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?
Big data amounts with Highcharts / Highstock (async loading)
Highcharts: how to change line color when hovering a scatterplot series
how to continue the graph line when missing series of data in middle of highcharts
Different color to same series line in highstock graph?
How to plot a highstock single line series graph from ajax data
Highcharts csv data loading
How to change zone line color in highcharts
how to pass data in Highcharts(Line Graph)
Related Tags