score:2
Accepted answer
It seems that for line charts where you have zero values or adjacent data points with the same value the only way to achieve a gradient is by applying the gradient to the markers themselves rather than the actual line.
It seems that this was/is a known Highcharts
issue as can be seen here, but the markers
work around which I pulled from here can be viewed in the below snippet:
$(function () {
var colors = ['#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'];
var applyGradient = function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
]
};
};
// works if you comment this out.
//colors = $.map(colors, applyGradient);
$('#container').highcharts({
colors: colors,
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 0,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{
data: [2, 10, 40, 40, 40, 40, 40, 40, 40, 40, 30, 20],
marker: {
fillColor: applyGradient(colors[0])
}
}, {
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
marker: {
fillColor: applyGradient(colors[1])
}
}, ]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 300px"></div>
Source: stackoverflow.com
Related Query
- Highcharts line chart strange issue
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Highcharts cloud issue with data source when duplicating chart
- HighCharts turn animation false for line chart
- Highcharts - issue about full chart width
- Highcharts => Getting the id of a point when clicking on a line chart
- Improve performance of Highcharts line chart
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Highcharts line chart won't display line chart in IE
- Highcharts - Scatter chart with a line connecting the dots in the series
- Highcharts line chart tooltips not showing correctly?
- Issue Dynamically Changing HighCharts Chart Title
- Add dynamic data to line chart from mysql database with highcharts
- Highcharts reversed line chart is partially hidden at min value
- Add custom buttons in Angular Highcharts Line Chart
- I want to add a line to each column in a Highcharts column chart
- Overlap datalabels line chart highcharts
- HighCharts Stock Chart error code 18
- How to add a horizontal line in Column bar chart in Highcharts plugin?
- Highcharts bubble chart datalabels color contrast issue
- How to change space value between grid and yAxis in Highcharts line chart
- Highcharts line chart with multi colored areas
- highcharts IE8 redraw chart issue
- Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts
- Highcharts change symbol and hover text of individual points Line Chart
- Highcharts - Gantt Chart plot issue
- Highcharts add point to line chart with json
- Highcharts Pie chart multi line labels overlapping
- HighCharts missing data points on line chart
More Query from same tag
- Highcharts Solid Gauge Dynamic Update Using JSON
- Highcharts - Bar chart show full label on Y Axis
- Grey out item in Highcharts legend
- How to make highchart points redirect to another component with value in React?
- Highcharts horizontal bar chart with text inside bars
- How to extend yAxis grid Line to full plot area in Highcharts?
- How to change area graph color above certain value in Highcharts
- HighCharts: How to format particular label column?
- Highcharts Pie charts get the selected pie id
- how to use function (chart) in react?
- Highcharts/highstock set yAxis Min and Max with Scroll
- How to change time in hours on HighChart xAxis from Military to Standard time?
- extending highcharts with an ajax load event
- Cannot read property 'info' of undefined
- Highcharts - Grouped Scatter? (relative to Grouped Column)
- show data of highcharts from database table laravel
- How to generate PDF Files based on a HTML+CSS+jQuery page containt
- Set navigator min zoom
- Highcharts multiple yaxis plotband collision
- How do I change RRDTool graphs?
- Chart Width no render ok
- Highchart - Editing the tooltip date format content on hover
- Highchart js max 15 plots to be plotted
- highCharts overlay dataLabels
- (Highcharts) Display Newest Data From Text File Only
- Why does opening a CSV file in Excel break my Highcharts chart?
- highcharts: dynamically define colors in pie chart
- how to add hover effect in hightcharts?
- Highcharts bar chart with fixed bar widths and gaps
- Link two series object in Highcharts and add event