codeyellowbv / chartist-plugin-legend Goto Github PK

I am working on reactjs this issue came up when updating label and data dynamical

I have 2 data sets:

const DATA1 = {
  series: [
    [0, 2],
    [1, 1]
  ]
}

const DATA2 = {
  series: [
    [0, 2],
    [1, 1]
  ]
}

Note: the 2 data sets contain the same values but are not the same object.

I inject one of them in a Chartist which draws this chart:

Then I hide the blue line by unchecking the box:

Then I dynamically inject the other set by clicking the "Switch data set" button:

The blue line shows again.

I've just noticed the npm package has still the 0.4.0 version.
Is there a specific reason it differs from the github-repository's version, or was it just a honest mistake not updating npm too?

Cheers!

Can you please add a license to your code? ##

In the chart options, I set ignoreEmptyValues, which disables drawing labels and slices for unnecessary elements. I was wondering if this option could be passed into this plugin to disable showing the legend key for this element?

Note that 2 sections are drawn and there are indeed 3 elements, but one of them has a value of 0 and thus is not drawn. I also don't want this element's label key to be shown

It's better to isolate your examples on a separate html page per capability.

When hiding a series in the chart using the legend buttons i think what happens is that the array of data gets copied and the selected series gets removed?
In my application i constantly add new data to the chart and thus when hiding a series that series is no longer available in the data array to add new data to.

Im am not sure how to solve it so i will just leave the buttons feature out for now, but would it not be possible to add a flag to the data array instead of just taking the data out and back in all the time?

I'm installing this using npm i chartist-plugin-legend --save and the version that is installed belongs to the tag 0.2.0 and not the 0.2.1. But the weird thing is that the package.json says that the version installed is the 0.2.1.

I've noticed that because the AMD is not working due to the missing Chartist argument in the factory function.

In the demo version, let say we click on the Piece A legend (red color) in pie chart. However, after clicking on the legend, the piece will not disappear in the chart. The same stays for other pieces as well in some occasions.

In fact, I found the bug and this is what exactly happens:
Let say we have 4 colors for pieces legend. The order of colors is: 1- blue 2- red 3- yellow 4- green. When we unselect the first piece that its color is blue, the plugin resets the colors and again, starts from the first color, blue. As a result, colors of pieces 2 through 4 will be blue, red and yellow while it should be red, yellow and green. In other words, whether a piece is selected or not, the colors should stay the same all the time.

Is possibile to have a legend field deactivated at startup?
Thank you

.. face-desk

Hi,

Is there an available event, outside of chartist and specific for chartist-plugin-legend?

eq.

onComplete event to avoid some race conditions?

I'm experiencing an issue that was reported on the Gitlab Repo

If I have multiple charts with legends on a single page using id's to select them, it seems that the last chart is the only one that gets a legend generated. It does not seem to matter what type of chart I use. I can give a reproducible example if necessary.

Hello.
I making line chart with chartist.
and I use chartist-plugin-legend to explain data name
But, when i make a line chart, text color is white , and when i drag, it appear..
How to get black color.. ?
I know default color is black but Why it has white color .. I don't understand.
Do you know how to fix it?

Is it possible to use the click function of the label for a button ? Tried to hide / show the graph by implementing a toggle button but did not work for me.

Is it possible to place legend box at bottom instead of top. More generally, that would be great to be able to set position in options (right, left, top, bottom)

I updated my project with new version of chartist 0.9.8, but seems like legends plugin is not compatibility with this version.

If I use old version of legend plugin, I get two graphs per widget.
But new version of legends plugin is not compatible. I am getting error saying chartist-plugin-legend is not a function and $ is not defined.

Hey There,
Awesome plugin and thank you for making this available.

I saw a previous closed issue about moving the legend using custom css.
Probably a noob question but how would I with css place the legend below the chart?

Thanks again.

I have a problem, maybe is caused by a bad building:

            console.log('arr_data ' + arr_data);
            obj = { "name": tara_fin[i], "data": arr_data };
            arr_series.push(obj);

I get this data output:

arr_data 36,27
arr_data 18,9
arr_data 9,9
arr_data 9,48
arr_data 36,24
arr_data 12,12
arr_data 12,12

But in the graph I only get all the bars with the last array information, the labels are okey, w/o the box color border, but it works.
Sorry with my very bad English, and thanks for the response.

Hi,

Thanks for this awesome plugin.
Would it be possible for you to create a bower package for it please ?

Thanks

The code of chartist-plugin-legend.js that was given in the demo application and that in the repository are different and the newer one doesn't work. At least with the sample index.html that you provide in the repository. I request to update the index.html in the repository with the latest fix.

Would be nice to be able to position the legend on either side of the chart in addition to the current top/bottom options.

Hi,

I have a problem using this plugin when i simply add the plugin output this code:

<li class="ct-series-0 inactive" data-legend="0">function () {                                                                          // 892
                                                                                                                       // 893
// If the string looks like an identifier, then we can return it as is.                                                // 894
// If the string contains no control characters, no quote characters, and no                                           // 895
// backslash characters, then we can simply slap some quotes around it.                                                // 896
// Otherwise we must also replace the offending characters with safe                                                   // 897
// sequences.                                                                                                          // 898
                                                                                                                       // 899
            if (ix.test(this)) {                                                                                       // 900
                return this;                                                                                           // 901
            }                                                                                                          // 902
            if (nx.test(this)) {                                                                                       // 903
                return '"' + this.replace(nxg, function (a) {                                                          // 904
                    var c = escapes[a];                                                                                // 905
                    if (c) {                                                                                           // 906
                        return c;                                                                                      // 907
                    }                                                                                                  // 908
                    return '\\u' + ('0000' + a.charCodeAt().toString(16)).slice(-4);                                   // 909
                }) + '"';                                                                                              // 910
            }                                                                                                          // 911
            return '"' + this + '"';                                                                                   // 912
        }
</li>

Just simply use :

require('chartist-plugin-legend');

new Chartist.Bar('.ct-chart', data, {
        stackBars: true,
        plugins: [
            Chartist.plugins.legend()
        ]
    },
});

Hello guys,
I'm trying to plot a pie chart where i have N number rows of data.
When i plot that half of my pie chart looks black that's one of the issue and my main issue is im not able to assign colors for those N legends
Here u can see my pie chart along with legends
In legends it has color for first four. where for those four i manually assigned the color

How can i assign color for all the legends where it should match with pie chart.

It happens even in the demo, if you click the first legend field the second field takes his name and color (and the third become the second ... etc) and legend colors dont change according that.

In others charts like bars dont happens, if you remove one color the other values remains theirs colors.

I am working on reactjs this issue came up when updating label and data dynamical

This is not an issue but I just wanna leave it here for beginner like me.

The CSS in the description log is actually not a css3 but in SCSS syntax. Adding it directly to your react project or others maybe will not work.

What I did: Converted it to CSS3 to my needs
here is a example of it

            .ct-legend {
		position: relative;
		text-align: center; //position of the group, use either left or right
		z-index: 10;
	}
	.ct-legend li {
		display:inline; // make the legend in one row
		text-align: center;
		position: relative;
		padding-left: 23px;
		list-style-type:none // makes the default bullet invisible
	}
	.ct-legend li:before {
		width: 15px; // how big is the color
		height: 15px; // how big is the color
		position: absolute;
		left: 0;
		content: '';
		border: 3px solid transparent;
		border-radius: 2px;
	}
	.ct-legend.ct-legend-inside {
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.ct-series-1 {
		margin-left: 20px;
	}
	.ct-series-2 {
		margin-left: 20px;
	}
	.ct-series-0:before {
		background-color: green; //you have yo match the color to your chartist stroke for each line or whatever
		border-color: green;
		margin-top: 3px;
	}
	.ct-series-1:before {
		background-color: #c1682c;
		border-color: #c1682c;
		margin-top: 3px;
	}
	.ct-series-2:before {
		background-color: #058cc6;
		border-color: #058cc6;
		margin-top: 3px;
	}

//add series # up to the one you want styling

The color of the legends are not being rendered. I can't use SASS on my project. Is there a way to show to correct colors without SASS?

I have different charts on the same page. Depending on what the user is graphing I might change the colors to some hard coded values. That works for the data but the legend doesn't change to match the data color. Is there a way to refresh the legend so it changes the colors to match the data or a way to change the legend color directly?

If I add a a axis offset, the legends did not apear.
This code shows the legends:

var chart = new Chartist.Bar('#chart12', {
labels: ['Combinados','Bebidas','Entradas','Diversos','Rolls/teppan','Sushi/sashimi','Outros'],
series: [
{"name": "Fechamento", "data": [41, 19, 14, 7, 6, 12, 0]},
{"name": "Últimos 30", "data": [30, 23, 17, 9, 8, 8, 4]},
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
plugins: [
Chartist.plugins.legend({
position: 'bottom'
})]
});

If I add a offset for the axis, It does not show:

var chart = new Chartist.Bar('#chart12', {
labels: ['Combinados','Bebidas','Entradas','Diversos','Rolls/teppan','Sushi/sashimi','Outros'],
series: [
{"name": "Fechamento", "data": [41, 19, 14, 7, 6, 12, 0]},
{"name": "Últimos 30", "data": [30, 23, 17, 9, 8, 8, 4]},
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 90
}
plugins: [
Chartist.plugins.legend({
position: 'bottom'
})]
});

I've made a new fork of chartist-plugin-legend, you can see it in the forks list. It probably shouldn't be merged in as it's a) guts the project code like a fish and b) has a new license.

But I bring it up because the idea of using chartist signals to add and keep legends up to date is worth considering. It's much cleaner to have chartist tell me when a series is being drawn than try and tie lots of indexes together from copied arrays.

I have just found out (after several hours of debugging) that when aspectRatio is set in the chartist options, the svg style gets set to

.aspectRatio-class svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

which makes the svg overlaps with the legend

This example breaks the chart. Also tried to put it at the end, same result.
_ var lineArea4 = new Chartist.Line('#PROGmath', { series: [{ name: '1-10 in Order',
data: [ {x: new Date(1547222400000), y: 1}, {x: new Date(1552492800000), y: 10}, {x: new Date(1554998400000), y: 25}, {x: new Date(1555293180000), y: 100} ] }, { name: 'Point out 0-10',
data: [ {x: new Date(1554982980000), y: 1}, {x: new Date(1573056000000), y: 75}, {x: new Date(1582560000000), y: 100} ] }, { name: '0-10 flash',
data: [ {x: new Date(1554982980000), y: 1}, {x: new Date(1560253380000), y: 100} ] }, { name: 'object math',
data: [ {x: new Date(1550195580000), y: 20}, {x: new Date(1552705020000), y: 30}, {x: new Date(1555383420000), y: 43}, {x: new Date(1573056000000), y: 60}, {x: new Date(1582560000000), y: 100} ] }, { name: 'counts to 20',
data: [ {x: new Date(1571068800000), y: 1}, {x: new Date(1582732800000), y: 100} ] }, { name: 'random 1-20',
data: [ {x: new Date(1571068800000), y: 1}, {x: new Date(1582732800000), y: 100} ] }, { name: 'flash 0-20',
data: [ {x: new Date(1574006400000), y: 1}, {x: new Date(1582732800000), y: 100} ] }, { name: 'basic math',
data: [ {x: new Date(1568649600000), y: 1}, {x: new Date(1582732800000), y: 100} ] }
]
},
plugins: [ Chartist.plugins.legend({ legendNames: ['1-10 in Order', 'Point out 0-10', '0-10 flash', 'object math', 'counts to 20', 'random 1-20', 'flash 0-20', 'basic math'], }) ]
{
axisX: {
type: Chartist.FixedScaleAxis,
divisor: 7,
labelInterpolationFnc: function(value) {
return moment(value).format('MMM D');
}
}
},
);_

Hi!

I've got an issue with the plugin. The series revert to their old values on hiding a line. Please see the example bellow.

class Test extends React.Component {
  state = {
    series: [
      { name: 'Money A', data: [60000, 40000, 80000, 70000] },
      { name: 'Money B', data: [40000, 30000, 70000, 65000] },
      { name: 'Money C', data: [8000, 3000, 10000, 6000] },
      { name: 'Money D', data: [15000, 80000, 60000, 40000] },
      { name: 'Money E', data: [80000, 60000, 40000, 20000] },
    ],
  }

  _onClick = () => {
    this.setState({
      series: [
        { name: 'Money A', data: [40000, 40000, 40000, 40000] },
        { name: 'Money B', data: [40000, 40000, 40000, 40000] },
        { name: 'Money C', data: [40000, 40000, 40000, 40000] },
        { name: 'Money D', data: [40000, 40000, 40000, 40000] },
        { name: 'Money E', data: [40000, 40000, 40000, 40000] },
      ],
    })
  }

  render() {
    return (
      <div>
        <ChartistGraph
          type='Line'
          data={{
            series: this.state.series,
            labels: [
              'First quarter of the year',
              'Second quarter of the year',
              'Third quarter of the year',
              'Fourth quarter of the year',
            ],
          }}
          options={{
            width: '100%',
            height: '300px',
            fullWidth: true,
            chartPadding: {
              right: 40,
            },
            plugins: [ChartistLegend({})],
          }}
        />
      <Button onClick={this._onClick}>
        click
      </Button>
     </div>
    )
  }

Hi, thanks for making this great plugin.

Is there or could there be a simple way to output the value next to the legend?

For example, I have a pie chart and want to put the percentage value on the legend;

Thanks again,

Is there a possibility to group the legends? Instead of having 1 legend for 1 line can v have 1 legend for multiple lines?

Hi,

first of all, thanks for your work with this plugin.

This issue isn't a problem with the plugin but rather with my lack of experience using it.

I didn't install the plugin via npm. Rather, I just copied the .js file to my static directory (it's a Flask app) and imported in my view.

<script src="{{ url_for('static', filename='assets/js/chartist-plugin-legend.js')}}"></script>
<script src="{{ url_for('static', filename='assets/js/dashboard-update.js')}}"></script>

where dashboard-update contains the functions that request new data and update my line charts.

I currently initialize empty Chartist line charts when the page loads:

 var data = {
                        labels: [],
                        series:[[]]
                    };
var options = {
                lineSmooth: Chartist.Interpolation.none({
                    fillHoles: true
                }),
                plugins: [
                        Chartist.plugins.legend({
                            legendNames: []
                        })
                    ]
            };
new Chartist.Line('.ct-chart', data, options);

And then update them via ajax:

$.ajax({
    type: "POST",
    url: "/getChartData",
    contentType:"application/json",
    data : JSON.stringify(requestJSON),
    success: function(resultJSON) {
        if($.trim(resultJSON)) {
            var result = JSON.parse(resultJSON);
            var data = {
                labels: result['labels'],
                series: result['series']
            };
            var options = {
                lineSmooth: Chartist.Interpolation.none({
                    fillHoles: true
                }),
                plugins: [
                        Chartist.plugins.legend({
                            legendNames: legends
                        })
                    ]
            };
            chart.get(0).__chartist__.update(data, options);
        }
    },
    error: function() {
        ...
    }
});

where legends is an array with the same number of strings as there are series. However, at each update, new series are included, the chart itself loads, but the legends don't.

How am I doing wrong?
Thanks!

The charts are working fine in Chrome, but we got issues on IE. For example when the IE browser is not maximized, and then we maximize it, we got following error ( see screenshot below)

Could you please let me know how this can be fixed?

Best,
Ciprian

I need to select/deselect legend items through options to have some legend items deselected when the chart is loaded.

I'm using meteor build tool and chartist plugins to represent my data.
I have java script for legend template got from internet as follows

Template.js

function drawBarChart() {
     new Chartist.Bar('.legendChart1', {
         labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
         series: [
                { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
                { "name": "Money B", "data": [40000, 30000, 70000, 65000] }
         ]
      }, {
           plugins: [
               Chartist.plugins.legend()
           ]
      });
};
Template.legendTemplate.rendered = function(){
  drawBarChart();
}

HTML

<template name="legendTemplate">
	<div class="legendChart1">
	</div>
</template>

And a corresponding import statement as
import {legend} from 'chartist-plugin-legend';

I have used similar import statements which are working as expected.

import {ctThreshold} from 'chartist-plugin-threshold';
import {ctBarLabels} from 'chartist-plugin-barlabels';
import {ctPointLabels} from 'chartist-plugin-pointlabels'; 

There is a similar error for tooltip import too as "TypeError: Chartist.plugins.tooltips is not a function" .
import {tooltip} from 'chartist-plugin-tooltips'

Corresponding NPM statements I have used.

meteor npm install --save chartist
meteor npm install --save chartist-plugin-barlabels
meteor npm install --save chartist-plugin-threshold
meteor npm install --save chartist-plugin-pointlabels
meteor npm install --save chartist-plugin-tooltips

Please help me to plot the bar chart. Thank you inadvance.

Hi,
How can I assign the color of the legend according to the color of the pie chart series? Right now its defined in CSS and hard coded, but what if the number of values increases then how I will know at which level i have to define the background-color in CSS?

I have searched it a lot, I have not even found the solution on any link.

Thanks.
Regards,
Nosheen Javed.

When the legend plugin is enabled and a height is explicitly set in the chartist options something strange happens. The chart expands outside the height boundary and cuts off. This is occurring only in Firefox and only when height is set. Tested on Firefox 42 and 44.

Expected results (Chrome, Safari, IE11)

Unexpected result (Firefox)

Example configuration used to generate this chart:

var options = {
  showPoint: true,
  height: 100,
  axisX: {
    type: Chartist.AutoScaleAxis,
  },
  plugins: [
    Chartist.plugins.legend()
  ]
};

The plugin is overriding/ignoring the labelInterpolationFnc() option under axisX & axisY.

Here's an example of the option that works when the chartist-plugin-legend plugin is not included:

var chartOptions = {
    axisY: {
        labelInterpolationFnc: function(value) {
            return '$' + value;
        },
    },
};

Screenshot

Debug information:

TypeError: line.match(...) is null
At chartist-plugin-legend:337:36
Stack trace:
implementAndDocumentFunctionByClass/<    https://codeyellowbv.github.io/chartist-plugin-legend/:337:36
forEach self-hosted:273:13 implementAndDocumentFunctionByClass 
  https://codeyellowbv.github.io/chartist-plugin-legend/:332:10
<anonymous>     https://codeyellowbv.github.io/chartist-plugin-legend/:358:5

Browser
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Scenario is,

Im making an AngularJS application using Visual Studio 2013.My chartist pie chart is working. I need to add legends. I have added .ct-legend class to my css. My problem is how i can install legend plugin there?

I am using the "ct-major-second" class for making my chart responsive and auto resizing the bars and stuff.... but any of these classes set the css "top" property to "0" hence making the legend overlap. This can be fixed using custom css, but it isnt recommended as it wont keep the chart and the legend dynamic (i have many pages that use these charts, few having 2 bars, few 5, few 10, etc etc) and i wont be able to handle the height of the legend in all cases if i keep it static.

Is there any way in which i could place the legend outside the entire chart container

If not how do you suggest i could handle this...?

Sorry if this is stupid, I'm new to this.

My issue is that after clicking on a label in legend to hide that entry from the chart the graph colors all update while the colors on legend don't.

after click:

I've also found that on https://codepen.io/chimmer/pen/aJvBgv same happens.

This is the css I use:
https://pastebin.com/xSF9EJCb
it's pure css, but that shouldn't matter since codepen has the same issue while using less, right?

I would want the chart to not update colors. Do I have to use onClick and manualy update the colors in my css?

As in my subject. I have multiple charts on my page, but the legend only gets rendered once for the whole page.

new Chartist.Bar('.ct-chart', data, {
        stackBars: true,
    },
    plugins: [
        Chartist.plugins.legend()
    ]
});

Should be

new Chartist.Bar('.ct-chart', data, {
        stackBars: true,
    },
   {
      plugins: [
        Chartist.plugins.legend()
     ]
   }
});