gionkunz / chartist-plugin-pointlabels Goto Github PK

View Code? Open in Web Editor NEW

50.0 50.0 76.0 27 KB

Point Labels Plugin for Chartist.js

License: Do What The F*ck You Want To Public License

JavaScript 87.17% HTML 12.83%

chartist-plugin-pointlabels's People

Contributors

Stargazers

Watchers

Forkers

jeromeweb dhruuva optikfluffel alexstanbury myster-t melhem86 artiswilliams gulyasfeccferenc vool linda-joseph copysunday pkdevboxy launay12u chrisemoulton mweimerskirch bgs1979 n8harris chrispappas sq33g booster085 ekotanjyan teameq radojesrb masakre whoisprakhar daigofuji qbikaris kameshk vegafactor mark53cz maximecouasnon joeybronner kdhfred phase06 nwgroup zedentox tearslee paulcrawls bshyman lucbu kenkrueger martinmuzatko stomachfat melvudin lowegreg gorobey talento liowjennick vincent-boulard sampk2004 markerui higematy joelstein nikolaboyko waltem eporsche titaniumbones kiranmayeem anurag-rapidue janayama okblue430 josespinal alex-cybermed fukcwxrld npahlsson dewa99 tonyadamo yummly lietsaki mierla iq-scm rafaelnavarro03

chartist-plugin-pointlabels's Issues

AxisX 0 undefined

The value 0 return undefined.

[object Object] instead of data

Plugin is showing just [object Object] instead of data from series. Problem is visible on demo page as well:
https://gionkunz.github.io/chartist-js/plugins.html

Point Labels are not being created

I am trying to use this plugin for my line charts, but the tags are not being inserted after each element like in the example on chartist shows. (https://gionkunz.github.io/chartist-js/plugins.html#point-label-plugin). I have included the script link towards the bottom of my code, placed before my script for creating the charts:

<script src="js/plugins/chartist-plugin-pointlabels-master/src/scripts/chartist-plugin-pointlabels.js"></script>

<script>
            // Loads per Broker (Red Chart)
            new Chartist.Line('#chart1', {
                labels: ['<?php echo $labels;?>'],
                series: [
                  [<?php echo $loads_per_broker_data;?>]
                ]
              }, {
                  plugins: [
                    Chartist.plugins.tooltip({
                        anchorToPoint: true
                  }),
                    Chartist.plugins.ctPointLabels({
                        textAnchor: 'middle',
                        labelInterpolationFnc: function(value) {return '$' + value.toFixed(2)}
                    })
                ],
                low: 0,
                showArea: true
              });
              // Loads per Carrier (Yellow/Orange Chart)
              new Chartist.Line('#chart2', {
                labels: ['<?php echo $labels;?>'],
                series: [
                  [<?php echo $loads_per_carrier_data;?>]
                ]
              }, {
                  plugins: [
                    Chartist.plugins.tooltip({
                        anchorToPoint: true
                  }),
                    Chartist.plugins.ctPointLabels({
                        textAnchor: 'middle'
                  })
                ],
                low: 0,
                showArea: true
              });
              // Margin % (Green Chart)
              new Chartist.Line('#chart3', {
                labels: ['<?php echo $labels;?>'],
                series: [
                  [<?php echo $margin_percent_data;?>]
                ]
              }, {
                  plugins: [
                    Chartist.plugins.tooltip({
                        anchorToPoint: true
                  }),
                    Chartist.plugins.ctPointLabels({
                        textAnchor: 'middle'
                  })
                ],
                low: 0,
                showArea: true
              });
              // Margin $ (Blue Chart)
              new Chartist.Line('#chart4', {
                labels: ['<?php echo $labels;?>'],
                series: [
                  [<?php echo $margin_dollar_data;?>]
                ]
              }, {
                  plugins: [
                    Chartist.plugins.tooltip({
                        anchorToPoint: true,
                        currency: '$'
                  }),
                    Chartist.plugins.ctPointLabels({
                        textAnchor: 'middle'
                  })
                ],
                low: 0,
                showArea: true
              });
              // Buy v. Market (Purple Chart)
              new Chartist.Line('#chart5', {
                labels: ['<?php echo $labels;?>'],
                series: [
                  [<?php echo $buy_market_data;?>]
                ]
              }, {
                  axisY: {
                      labelInterpolationFnc: function(value) {
                          return -value;
                      }
                  },
                  plugins: [
                    Chartist.plugins.tooltip({
                        anchorToPoint: true
                  }),
                    Chartist.plugins.ctPointLabels({
                        textAnchor: 'middle'
                  })
                ],
                /*low: 0,*/
                showArea: false
              }).on('data', function(context) {
                  context.data.series = context.data.series.map(function(series) {
                      return series.map(function(value) {
                          return -value;
                      });
                  });
              });
        </script>

How set the color of each point on one line...

Overlapping of point labels in multi line chart

Great plugin, thanks for it. I tried it on a single line chart, it works like a charm. When I tried it on a multi line chart, the values seem to overlap. I understand that this is because of the overlap of the lines. Setting padding/margin/offset doesn't work since it doesn't differentiate one point from another point of a different line. Is there a workaround for this? Please let me know, thanks!

Wrong label position on Bar Charts

I could not make this work properly on barcharts.

This is my code:

new Chartist.Bar('#demo_03', {
  labels: ['Corea del Sur' ,'Noruega' ,'Luxemburgo' ,'Países Bajos' ,'Islandia' ,'Dinamarca' ,'Suecia' ,'Reino Unido' ,'Alemania' ,'Finlandia' ,'Suiza' ,'Irlanda' ,'Estonia' ,'Australia' ,'Francia' ,'Austria' ,'Bélgica' ,'Canadá', 'España' ,'Rep. Checa' ,'Eslovaquia' ,'Polonia' ,'Nva. Zelandia' ,'Hungría' ,'Italia' ,'Eslovenia' ,'Letonia' ,'Turquía' ,'Israel' ,'Portugal' ,'EEUU' ,'Lituania' ,'Chile' ,'Grecia' ,'Japón' ,'Costa Rica' ,'Brasil' ,'México' ,'Colombia' ],
  series: [
    [98.80 , 97.05 , 97.04 , 96.66 , 96.48 , 94.34 , 93.80 , 93.48 , 92.14 , 91.95 , 90.62 , 86.71 , 86.19 , 85.89 , 85.87 , 85.09 , 84.79 , 83.90, 81.93 , 81.65 , 80.52 , 80.45 , 80.00 , 79.18 , 78.51 , 78.42 , 77.34 , 76.34 , 74.29 , 74.05 , 73.37 , 71.75 , 71.56 , 69.13 , 67.10 , 64.84 , 49.20 , 47.02 , 41.80 ]
  ]
}, {
  plugins: [
    Chartist.plugins.ctPointLabels({
      textAnchor: 'left',
      align: 'center'
    }),
    Chartist.plugins.ctTargetLine({
      value: 83
    })
  ],
  chartPadding: {
    right: 32
  },
  axisY: {
    offset: 20,
  },
    axisX: {
    offset: 120,
  }

});

This is my result:

I tried with this changes in the code, to no avail.

Any pointers or help is appreciated

constructor.name problematic use

Hi, I've noted that relying on constructor.name to verify the type of chart causes the plugin not to work when using code obfuscators or minimifiers. In this plunkr the problem is reproduced.

Maybe another way of checking the chart type could be used, or maybe the checking could be removed altogether.

TypeError: Cannot read property 'plugins' of undefined

Hi,
I am trying to use this plugin in react project but got an error. It shows TypeError: Cannot read property 'plugins' of undefined
Could you help? Thx in advanced.

Some of the code:

import ChartistGraph from "react-chartist";
import { ChartistLib, Chartist } from "chartist";
...

render() {
    let  chartOptions={
        axisX: {
            showGrid: fal
        },
        axisY: {
            showGrid: false,
            showLabel: false,
            low: 0,
            high: this.state.weeklySalesStatisticsBarChartData.high,
            offset: 0,
        },
        fullWidth: true,
        offset: 0,
        chartPadding: 25,
        plugins: [
            Chartist.plugins.ctPointLabels({
                textAnchor: 'middle'
            })
        ]
    };
    return (
        <ChartistGraph
               className="height-200 lineChart lineChartShadow"
               data={this.state.weeklySalesStatisticsBarChartData}
               type="Line"
               options={chartOptions}
               listener={{
                  created: data => {
                     let circleRadius = 4;
                     if (data.type === "point") {
                        let circle = new ChartistLib.Svg("circle", {
                           cx: data.x,
                           cy: data.y,
                           r: circleRadius,
                           'class': "ct-point-circle"
                        });

                        data.element.replace(circle);
                     } else if (data.type === "label") {
                        // adjust label position for rotation
                        const dX = data.width / 2 + (30 - data.width);
                        data.element.attr({ x: data.element.attr("x") - dX });
                     }
                  }
               }}
            />
    )

label position in bar chart

Hi,

can the label be positioned on top of the bar? i looked into the options and i only found a Y offset.
any practice to share ?
thank you

chartist-plugin-pointlabels doesnt work on production mode

hi, currently I use pointlabels plugin in development mode. I already installed the plugin and works on development mode, but when I build it to production mode, the pointlabels doesnt work. it doesnt appear. is there any idea how to show it on production mode?

Possible for Bar chart?

I have a website which shows the progress of projects.

I really need to add the point labels but I only use Bar charts, is it possible to customize this plugin to work with Bar chart?

ctPointLabels is not defined

Hi, I've found chartist to be an excellent tool. I customized my charts to a great extent by modifying the css file.

However, when I try to get any of the proposed plugins that you posted, I cannot get the to work. I'm srry if this is a newbie question, but that's what I'm. What I've tried so far are the following options:

OPTION A:

download the chartist-plugin-ctpointlabels.js and saved it in the "chartist/dist" folder, right alongside chartist.js and chartist.css which I know are working.
Added the plugin description in the configuration options of the chartist.Line call

        $scope.config = {
              high: 15,
              low: 0,
              showArea: true,
              showLine: true,
              showPoint: true,
              fullWidth:true,
              axisY: {
                 showLabel: false,
                 showGrid: false,
                 offset: 5
              },
              axisX: {
                showLabel: false,
                showGrid: false
              },
              plugins: [
                ctPointLabels({
                  textAnchor: 'middle'
                }),
                ],

        };

Result: All I get is an error stating that ctPointLabels is not defined: " ReferenceError: ctPointLabels is not defined"

OPTION B:

download the chartist-plugin-ctpointlabels.js, copied its code and placed it whitin chartis.js (on the same level as @module Chartist.Base - line 1153 or Chartist.Class - line 1044) o even at the very begging of the file (line 1).
and 3) same as OPTION A

It's worth noting that the chart is working fine with the original config options (with the the " plugins" section commented). The original working options are:

$scope.config = {
high: maxVal,
low: 0,
showArea: true,
showLine: true,
showPoint: showPoints,
fullWidth:true,
axisY: {
showLabel: false,
showGrid: false,
offset: 5
},
axisX: {
showLabel: false,
showGrid: false
}
// ,
// plugins: [
// ctPointLabels({
// textAnchor: 'middle'
// }),
// ],

};

Thanks for any help or guide on how to properly setup the workspace for plugins (I checked the chartistjs plugin section, but I couldn't find a solution)

webpack compability - Chartist is not defined

When working with webpack import, this plugin requires an
window.Chartist = Chartist;
assignment before doing a require.

Other plugins such as
'chartist-plugin-legend'
'chartist-plugin-tooltips'
work fine without it.

See Yopadd/vue-chartist#20

labelInterpolationFnc 0 gets passed as undefined

Hello! If not set, labelInterpolationFnc will use Chartist.noop. However, my chart shows undefined instead of 0.

I had to apply this function to fix this:

{
    labelInterpolationFnc: v=>v?v:0
}

How get and display sum of total values in Bar chart

Need to display sum of label at top of individual bar, it should be look like this,
can anyone suggest me how to achieve this

Thank you

Limits variable availability on falsey "Y" value

Taking a look at the "addLabel" Function in "chartist-plugin-pointlabels":

function addLabel(position, data) {
// if x and y exist concat them otherwise output only the existing value
var value = data.value.x !== undefined && data.value.y ?
(data.value.x + ', ' + data.value.y) :
data.value.y || data.value.x;

  data.group.elem('text', {
    x: position.x + options.labelOffset.x,
    y: position.y + options.labelOffset.y,
    style: 'text-anchor: ' + options.textAnchor
  }, options.labelClass).text(options.labelInterpolationFnc(value));
}

When y is falsey we default to the data.value.x; but when y = "0" perhaps we want to show a label 0. Is this the expected behavior? Or should we have a "!== undefined" after data.value.y as well?