highcharts-multicolor-series
Version:
Highcharts plugin that adds new series: multicolor-series, where you can define color for each part of a path, between two points.
296 lines (278 loc) • 10.5 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Multicolor series</title>
<link rel="stylesheet" charset="utf-8" type="text/css" href="css/styles.css" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('code').forEach((el) => {
hljs.highlightElement(el);
});
const snippets = document.getElementsByTagName('pre');
const numberOfSnippets = snippets.length;
for (let i = 0; i < numberOfSnippets; i++) {
const code = snippets[i].getElementsByTagName('code')[0].innerText,
copyIcon = `<svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 14H19C20.1046 14 21 13.1046 21 12V5C21 3.89543 20.1046 3 19 3H12C10.8954 3 10 3.89543 10 5V6.5M5 10H12C13.1046 10 14 10.8954 14 12V19C14 20.1046 13.1046 21 12 21H5C3.89543 21 3 20.1046 3 19V12C3 10.8954 3.89543 10 5 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;
snippets[i].innerHTML = `<button class="hljs-copy">${copyIcon}</button>` + snippets[i].innerHTML;
snippets[i].getElementsByClassName('hljs-copy')[0].addEventListener("click", function () {
button = this;
button.innerText = 'Copying..';
navigator.clipboard.writeText(code);
button.innerText = 'Copied!';
setTimeout(function () {
button.innerHTML = copyIcon;
}, 1000)
});
}
});
</script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="dist/multicolor-series.js"></script>
<script src="samples/demo.js" defer></script>
</head>
<body>
<header>
<div class="container">
<div class="columns">
<div class="details">
<a href="http://blacklabel.net">
<img class="logo" src="https://blacklabel.net/wp-content/uploads/2023/09/blacklabel_logo_white.png"
alt="Black Label">
</a>
<h1>Multicolor Series Highcharts Module</h1>
<p>Typescript-supported Highcharts plugin that adds both line/area multicolor series, where you can define color for each part of a path.</p>
</div>
<div id="showcase-demo" class="chart"></div>
</div>
</div>
</header>
<nav>
<div class="container">
<ul>
<li>
<a href="#prerequisites">Prerequisites</a>
</li>
<li>
<a href="#installation">Installation</a>
</li>
<li>
<a href="#usage">Usage</a>
</li>
<li>
<a href="#parameters">Parameters</a>
</li>
<li>
<a href="#demos">Demos</a>
</li>
<li>
<a href="#tests">Tests</a>
</li>
<li>
<a href="#changelog">Changelog</a>
</li>
<li>
<a href="#license">License</a>
</li>
</ul>
</div>
</nav>
<main class="container">
<section>
<p>
The latest code is available on GitHub:
<a href="https://github.com/blacklabel/multicolor_series/" target=”_blank”>
https://github.com/blacklabel/multicolor_series/
</a>
</p>
</section>
<section>
<h2 id="prerequisites">General prerequisites</h2>
<p>This module requires Highcharts package with the following versions installed in your project:</p>
<ul class="prerequisites-list">
<li>For version <b>3.1.0</b>: Highcharts <b>v12.0.0+</b></li>
<li>For version <b>3.0.0</b>: Highcharts <b>v11.3.0+</b></li>
<li>For version <b>2.4.0 - 3.0.0</b>: Highcharts <b>v10.0.0 - v11.2.0</b></li>
<li>For version <b>2.3.0</b>: Highcharts <b>v9.2.0 - v9.3.3</b></li>
<li>For version <b>2.x.x</b>: Highcharts <b>v4.2.2 - v9.2.0</b></li>
<li>For version <b>1.x.x</b>: Highcharts <b>v4.0.0 - v4.2.2</b></li>
</ul>
</section>
<section>
<h2 id="installation">Installation</h2>
<h3>NPM</h3>
<p>
Get the package from NPM in your app:
<pre><code class="language-javascript">npm install highcharts-multicolor-series</code></pre>
</p>
<p>
If Highcharts is not already installed, get the package with Highcharts:
<pre><code class="language-javascript">npm install highcharts highcharts-multicolor-series</code></pre>
</p>
<h3>CDN</h3>
<p>
Add a <code class="language-html"><script></code> tag below the Highcharts script tag:
</p>
<pre><code class="language-javascript"><script src="https://cdn.jsdelivr.net/npm/highcharts-multicolor-series"></script></code></pre>
</section>
<section>
<h2 id="usage">Usage</h2>
<h3>Basic usage example:</h3>
<p>The Live example is available <a href="https://jsfiddle.net/BlackLabel/ou4L32cn/" target=”_blank”>here</a>.</p>
<pre><code class="language-javascript">Highcharts.chart('container', {
series: [{
type: 'coloredline',
data: [{
y: 70,
segmentColor: 'blue'
}, {
y: 20,
segmentColor: 'green'
}, {
y: 40,
segmentColor: 'yellow'
}, {
y: 50,
segmentColor: 'red'
}, {
y: 10,
segmentColor: 'pink'
}]
}]
});
</code></pre>
<h3>Basic usage example with Typescript (React):</h3>
<p>The Live example is available <a href="https://codesandbox.io/p/sandbox/highcharts-multicolor-series-forked-6m6dd9?file=%2Fsrc%2FApp.tsx&workspaceId=e204a32a-9996-4c96-b99d-9fe3d6fc96d0" target=”_blank”>here</a>.</p>
<pre><code class="language-javascript">import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
// Implement the package module.
import MulticolorSeries from "highcharts-multicolor-series";
MulticolorSeries(Highcharts);
// The package allows you to import both `Highcharts.SeriesMulticolorLineOptions` and
// `Highcharts.SeriesMulticolorAreaOptions` interfaces, accordingly to the series.
// Interfaces extend the default series options.
const App = () => {
// Type the chart options.
const options: Highcharts.Options = {
series: [
{
type: "coloredarea",
data: [
{
y: 40,
segmentColor: "red"
},
{
y: 60,
segmentColor: "blue"
},
{
y: 30,
segmentColor: "yellow"
},
{
y: 10,
segmentColor: "green"
},
{
y: 50,
segmentColor: "brown"
},
{
y: 20,
segmentColor: "pink"
},
{
y: 70,
segmentColor: "orange"
}
]
}
]
};
return <HighchartsReact highcharts={Highcharts} options={options} />;
};
export default App;
</code></pre>
</section>
<section>
<h2 id="parameters">Parameters</h2>
<div class="table-container">
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Defaults</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-javascript">series.type</code></td>
<td>String</td>
<td>Yes</td>
<td>-</td>
<td>Set it to <code class="language-javascript">coloredline</code> or <code
class="language-javascript">coloredarea</code> to use multicolor series.</td>
</tr>
<tr>
<td><code class="language-javascript">point.segmentColor</code></td>
<td>String</td>
<td>No</td>
<td>-</td>
<td>Controls line color between n and n+1 point, independent from point.color, which changes marker color.</td>
</tr>
</tbody>
</table>
</div>
</section>
<section>
<h2 id="demos">Demos</h2>
<div id="coloredline" class="chart"></div>
<div id="coloredarea" class="chart"></div>
</section>
<section>
<h2 id="tests">Tests</h2>
<p>This package contains tests for the proper elements rendering. To run tests, type:</p>
<pre><code class="language-javascript">npm run test</code></pre>
</section>
<section>
<h2 id="changelog">Changelog</h2>
<p>The changelog is available <a href="https://github.com/blacklabel/multicolor_series/blob/master/CHANGELOG.md" target=”_blank”>here</a>.</p>
</section>
<section>
<h2 id="license">License</h2>
<p>This package is licensed under <a href="https://github.com/blacklabel/multicolor_series/blob/master/license.txt" target="_blank">MIT.</a></p>
<p>The package is built on top of the Highcharts library which requires a commercial license. Non-commercial use may qualify for a free educational or personal license. Read more about licenses <a href="https://shop.highcharts.com/?utm_source=npmjs&utm_medium=referral&utm_campaign=highchartspage&utm_content=licenseinfo">here</a>.</p>
</section>
</main>
<footer>
<div class="container">
<div class="links">
<a href="http://blacklabel.net">
<img class="logo" src="https://blacklabel.net/wp-content/uploads/2023/09/blacklabel_logo_white.png"
alt="Black Label">
</a>
© 2025
<div class="social">
<a class="social-link" href="https://github.com/blacklabel" title="GitHub">
<img class="social-img"
src="https://blacklabel.net/wp-content/themes/website-wordpress/assets/img/github.png" alt="GitHub">
</a>
<a class="social-link" href="https://www.linkedin.com/company/black-label" title="LinkedIn">
<img class="social-img"
src="https://blacklabel.net/wp-content/themes/website-wordpress/assets/img/linkedin.png" alt="LinkedIn">
</a>
</div>
</div>
</div>
</footer>
</body>
</html>