search

chartist-js / chartist

Simple responsive charts
https://chartist.dev
MIT License
13.35k stars 2.53k forks source link

ToolTips #1305

Open Bradley-H opened 2 years ago

Bradley-H commented 2 years ago

From what I can tell in the docs, There is nothing on Tooltips, I'd like a little more information on my charts when I hover over something, especially for my clients.

pmoayer commented 2 years ago

https://gionkunz.github.io/chartist-js/plugins.html#tooltip-plugin

stklcode commented 1 year ago

There is a hacky workaround for the plugin v0.1.4 to work with Chartist v1 UMD version. The chart classes have to be aliased, because Bar was renamed to BarChart, etc.

<html>
<head>
  <title>Chartist test</title>
  <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>
  <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">
</head>
<body>
<div id="chart" style="height: 50vh"></div>

<script>
  /* Dirty hack to make the tooltip plugin compatible with Chartist v1.
      The chart classes have been renamed, but functionality remains unchanged, so we define aliases. */
  Chartist.Bar = Chartist.BarChart;
  Chartist.Pie = Chartist.PieChart;
  Chartist.Line = Chartist.LineChart;

  new Chartist.LineChart(
    '#chart',
    {
      labels: [1, 2, 3, 4, 5, 6, 7, 8],
      series: [[5, 9, 7, 8, 5, 3, 5, 4]]
    },
    {
      low: 0,
      showArea: true,
      plugins: [ Chartist.plugins.tooltip() ]
    }
  );
</script>
</body>
</html>

I know, that's not perfect, but it does the job for now. However, there is some work in progress updating the plugin https://github.com/LukBukkit/chartist-plugin-tooltip/pull/20 (minimal changes) stklcode/chartist-plugin-tooltip@main (major rework of the project)

I'll keep you updated when there is anything to be published.

V-Py commented 1 year ago

Hi, is there any updates regarding this feature/plugin ? If I want to help on this subject what's the place to do it since there is two plugins and the main library ?