chartist-plugin-tooltips-updated
Advanced tools
This plugin provides quick and easy tooltips for your Chartist charts. It's published on npm as chartist-plugin-tooltips-updated.
The following options can be configured when the plugin is loaded. Their default values are as shown.
var defaultOptions = {
currency: undefined, // Accepts '£', '$', '€', etc.
// Append curreny information e.g. 4000 => €4,000
tooltipFnc: undefined, // Accepts function
// Build custom tooltip
transformTooltipTextFnc: undefined, // Accepts function
// Transform tooltip text
class: undefined, // Accecpts 'class1', 'class1 class2', etc.
// Adds class(es) to the tooltip wrapper
anchorToPoint: false, // Accepts true or false
// Tooltips do not follow mouse movement -- they are anchored to the point / bar.
appendToBody: true, // Accepts true or false
// Appends tooltips to body instead of chart container,
metaIsHTML: false // Accepts true or false
// Whether to parse the meta value as HTML or plain text
};
yarn add chartist-plugin-tooltips-updated
Include the JavaScript script file of the plugin either using one of two options:
<script> tag:<script src="node_modules/chartist/dist/index.umd.js"></script>
<script src="node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.min.js"></script>
<script>
var chart = new Chartist.LineChart('.ct-chart', data, {
plugins: [
Chartist.plugins.tooltip()
]
});
</script>
import { LineChart } from 'chartist';
import ChartistTooltip from 'chartist-plugin-tooltips-updated';
let chart = new LineChart('.ct-chart', data, {
plugins: [
ChartistTooltip()
]
});
Warning: The version 0.0.17 of the original package available on npm included a s suffix for the tooltip function
which now has been removed,
see the related commit.
Include the two CSS files in your project:
node_modules/chartist/dist/index.cssnode_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.cssEither using one of two options:
<head> of your HTML file<link rel="stylesheet" href="node_modules/chartist/dist/index.css">
<link rel="stylesheet" href="node_modules/chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css">
import 'chartist/dist/index.css';
import 'chartist-plugin-tooltips-updated/dist/chartist-plugin-tooltip.css';
Without a descriptive text:
var chart = new Chartist.LineChart('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[1, 5, 3, 4, 6, 2, 3],
[2, 4, 2, 5, 4, 3, 6]
]
}, {
plugins: [
Chartist.plugins.tooltip()
]
});
With a descriptive text:
var chart = new Chartist.LineChart('.ct-chart', {
labels: [1, 2, 3],
series: [
[
{meta: 'description', value: 1},
{meta: 'description', value: 5},
{meta: 'description', value: 3}
],
[
{meta: 'other description', value: 2},
{meta: 'other description', value: 4},
{meta: 'other description', value: 2}
]
]
}, {
plugins: [
Chartist.plugins.tooltip()
]
});
With a custom formatted descriptive text:
var chart = new Chartist.LineChart('.ct-chart', {
labels: [1, 2, 3],
series: [
[
{meta: 'description', value: 1},
{meta: 'description', value: 5},
{meta: 'description', value: 3}
],
[
{meta: 'other description', value: 2},
{meta: 'other description', value: 4},
{meta: 'other description', value: 2}
]
]
}, {
plugins: [
Chartist.plugins.tooltip({
currency: '$',
class: 'class1 class2',
appendToBody: true
})
]
});
If you change the CSS properties of the tooltip, you shouldn't change the display property,
otherwise the tooltip may be incorrectly positioned.
This guide is a bit outdated and may not work with new versions of the plugin.
In Chartist, you can replace the default point element with a custom element. There is a pretty demo which uses events to replace the default point graphics. If you want the tooltip to work fine with a new element, you need to include two more properties to your custom element:
'ct:value': data.value.y,
'ct:meta': data.meta,
And you have to add the following CSS rule to the new element by using the style option
or by adding this rule to your css class:
pointer-events: all!important;
(If you want to read more about, why you have to add this css rule take a look at chartist-plugin-tooltip#72)
So the final code could look like this. Here is a live demo
chart.on('draw', function(data) {
// If the draw event was triggered from drawing a point on the line chart
if(data.type === 'point') {
// We are creating a new path SVG element that draws a triangle around the point coordinates
var circle = new Chartist.Svg('circle', {
cx: [data.x],
cy: [data.y],
r: [5],
'ct:value': data.value.y,
'ct:meta': data.meta,
style: 'pointer-events: all !important',
class: 'my-cool-point',
}, 'ct-area');
// With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
data.element.replace(circle);
}
});
plugins: [
Chartist.plugins.tooltip({
appendToBody: true,
pointClass: 'my-cool-point'
})
]
This repository is a fork of tmmdata/chartist-plugin-tooltip. (Thanks for the great work!)
It seems as this repository is no longer maintained, that's why I decided to fork it and include several pull requests and update the dependencies.
[1.0.0] - 2nd January 2023
Versions 1.0.0 and above of this plugin only work with Chartist versions of 1.0.0 and above.
FAQs
Point Labels Plugin for Chartist.js
The npm package chartist-plugin-tooltips-updated receives a total of 5,401 weekly downloads. As such, chartist-plugin-tooltips-updated popularity was classified as popular.
We found that chartist-plugin-tooltips-updated demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.