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
- Can not access Highcharts chart from container, so I can't change data in a chart dynamically
- Highcharts not being drawn in some cases when using data from MySQL (page elements created before database query complete?) PHP / MySQL
- Highchart 2Layer 3D Donut chart
- Highcharts (scatter) tooltip notworking
- Is there a way of dynamically toggling the Highstock navigator to regain vertical space for the chart?
- Add spacing between points in HighChart
- HighCharts.js: How to Create a Boxplot with stems representing confidence intervals, NOT max/min?
- Synchronized HighCharts does not work when charts have different width
- Highcharts: Legend not show
- Highcharts Gauge Chart with text labels
- Highchart multiple level drilldown click event get drilldown series data
- How to change Highcharts object configuration locally with vue-highcharts?
- Highmaps with Highcharts : Highcharts error #17 with jQuery
- Color the portions of chart using "Google 3D Pie chart API" in Android
- EmberJS 2.7 passing data down into a component is failing
- Drilldown in two steps, multiple choice in Highcharts
- Highstock: xy zooming with panning
- Highcharts polar chart - zero at centre
- what means ${demo.css} in example files of highcharts ? That piece of code seems to be literal
- Programmatically set rangeSelector in Highcharts
- In highcharts how can I provide data with values x, y, title so that I can put the title in the tooltip?
- SyntaxError: missing ] after element list PHP, Jquery & Highcharts
- Jaspersoft Studio html5 chart (highchart) xAxis label overflowing
- Highcharts: export image show wrong color and line width if user change the color and/or line width
- Highcharts chart axis exceeding set min and max values
- How to change the color of the each slice in piechart based on the backend response using highcharts
- How to add Highcharts on UIWebView in iOS?
- Why code of Horizonal line(y-axis) on a single in Highcharts get applied to all other charts integrated with Webdatarocks
- Add background box to y-axis in highcharts
- Highcharts tooltip missing if shadow: true