Lower and upper dumbbell markers
const createChart = (increasingData, decreasingData) => Highcharts.chart('container', { chart: { inverted: true }, title: { text: 'Change in Card Usage' }, subtitle: { text: 'Season 21 vs Season 22 <br>Top 1000' }, tooltip: { pointFormat: 'Season 21: used in deck by ' + '<strong>{point.previous}</strong> of 1000 top players<br>' + 'Season 22: used in deck by <strong>{point.current}</strong> ' + 'of 1000 top players', shared: true }, xAxis: { type: 'category', opposite: true }, yAxis: { title: null }, legend: { enabled: false }, plotOptions: { dumbbell: { connectorWidth: 3, marker: { radius: 5, states: { hover: { lineWidth: 0 } } }, dataLabels: { enabled: true, color: 'contrast', crop: false, overflow: 'allow' } } }, series: [ { type: 'dumbbell', name: 'Increase', data: increasingData, color: Highcharts.getOptions().colors[2], marker: { enabled: true, symbol: 'triangleRight' }, lowMarker: { enabled: false } }, { type: 'dumbbell', name: 'Decrease', data: decreasingData, color: Highcharts.getOptions().colors[5], marker: { enabled: false }, lowColor: undefined, lowMarker: { enabled: true, symbol: 'triangleLeft' } } ] }); // Define custom SVG symbols for left and right triangles Highcharts.SVGRenderer.prototype.symbols.triangleLeft = (x, y, w, h) => [ ['M', x, y + h / 2], ['L', x + w, y], ['L', x + w, y + h], ['Z'] ]; Highcharts.SVGRenderer.prototype.symbols.triangleRight = (x, y, w, h) => [ ['M', x + w, y + h / 2], ['L', x, y], ['L', x, y + h], ['Z'] ]; // Process and transform the data for the chart const data = [ { name: 'wall-breakers', previous: 47, current: 128 }, { name: 'electro-giant', previous: 99, current: 88 }, { name: 'mortar', previous: 66, current: 79 }, { name: 'hog-rider', previous: 84, current: 78 }, { name: 'royal-giant', previous: 104, current: 73 }, { name: 'graveyars', previous: 101, current: 70 }, { name: 'test', previous: 51, current: 50 }, { name: 'giant', previous: 41, current: 49 }, { name: 'royal-hogs', previous: 39, current: 48 }, { name: 'balloon', previous: 62, current: 47 }, { name: 'lava-hound', previous: 54, current: 42 }, { name: 'goblin-drill', previous: 19, current: 41 }, { name: 'golem', previous: 49, current: 40 }, { name: 'x-bow', previous: 55, current: 36 }, { name: 'miner', previous: 9, current: 31 }, { name: 'battle-ram', previous: 48, current: 30 }, { name: 'goblin-giant', previous: 10, current: 30 }, { name: 'three-musketeers', previous: 18, current: 28 }, { name: 'goblin-barrel', previous: 57, current: 21 }, { name: 'ram-rider', previous: 23, current: 20 }, { name: 'elixir-golem', previous: 4, current: 7 }, { name: 'skeleton-barrel', previous: 4, current: 3 } ].map(dataPoint => { const isIncrease = dataPoint.previous < dataPoint.current; return { name: dataPoint.name, low: isIncrease ? dataPoint.previous : dataPoint.current, high: isIncrease ? dataPoint.current : dataPoint.previous, custom: { previous: dataPoint.previous, current: dataPoint.current } }; }); // Separate the data into increasing and decreasing series const increasingData = [], decreasingData = []; data.forEach((dataPoint, index) => { const isIncrease = dataPoint.custom.previous < dataPoint.custom.current, transformedDataPoint = { ...dataPoint, x: index }; if (isIncrease) { increasingData.push(transformedDataPoint); } else { decreasingData.push(transformedDataPoint); } }); createChart(increasingData, decreasingData);
CoreMore chart types
Install with NPM
The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages.
npm install highcharts --save
See more installation optionsDownload our library
The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.
DownloadBuy a license
You can download and try out all Highcharts products for free. Once your project/product is ready for launch, purchase a commercial license.
See License Pricing