These chart samples are useless

[amirandev]

Discussed in #9604

^{Originally posted by WEB-TM August 31, 2021}
I don`t really understand how to setup a line chart using this nonsense.
There is not selector to select canvas and there is not data array. These samples does not help me at all.

https://www.chartjs.org/docs/latest/samples/line/line.html
https://github.com/chartjs/Chart.js/blob/master/docs/samples/line/line.md

// <block:actions:2>
const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
      });
      chart.update();
    }
  },
  {
    name: 'Add Dataset',
    handler(chart) {
      const data = chart.data;
      const dsColor = Utils.namedColor(chart.data.datasets.length);
      const newDataset = {
        label: 'Dataset ' + (data.datasets.length + 1),
        backgroundColor: Utils.transparentize(dsColor, 0.5),
        borderColor: dsColor,
        data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
      };
      chart.data.datasets.push(newDataset);
      chart.update();
    }
  },
  {
    name: 'Add Data',
    handler(chart) {
      const data = chart.data;
      if (data.datasets.length > 0) {
        data.labels = Utils.months({count: data.labels.length + 1});

        for (var index = 0; index < data.datasets.length; ++index) {
          data.datasets[index].data.push(Utils.rand(-100, 100));
        }

        chart.update();
      }
    }
  },
  {
    name: 'Remove Dataset',
    handler(chart) {
      chart.data.datasets.pop();
      chart.update();
    }
  },
  {
    name: 'Remove Data',
    handler(chart) {
      chart.data.labels.splice(-1, 1); // remove the label first

      chart.data.datasets.forEach(dataset => {
        dataset.data.pop();
      });

      chart.update();
    }
  }
];
// </block:actions>

// <block:setup:1>
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
    },
    {
      label: 'Dataset 2',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
    }
  ]
};
// </block:setup>

// <block:config:0>
const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      }
    }
  },
};
// </block:config>

module.exports = {
  actions: actions,
  config: config,
};

In old version I used to (this old code is clear and easy to understand):

// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];

/* large line chart */
var line = document.getElementById("line");
var chartData = {
  labels: ["S", "M", "T", "W", "T", "F", "S"],
  datasets: [{
    data: [589, 445, 483, 503, 689, 692, 634],
    backgroundColor: 'transparent',
    borderColor: colors[0],
    borderWidth: 4,
    pointBackgroundColor: colors[0]
  }]
};
if (line) {
  new Chart(line, {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      display: false
    },
    responsive: true
  }
  });
}

var line1 = document.getElementById("line1");
if (line1) {
  new Chart(line1, {
      type: 'line',
      data: {
          labels: ['Jan','Feb','Mar','Apr','May'],
          datasets: [
            {
              backgroundColor:'#ffffff',
              borderColor:'#ffffff',
              data: [10, 11, 4, 11, 4],
              fill: false
            }
          ]
      },
      options: lineOptions
  });
}
```</div>

[zadam]

I wouldn't be so harsh myself, but I do agree that the current way samples are presented is not very helpful and simply listing a source code (ideally self-contained including HTML) would be better. It's not at all obvious how all these tabs fit together, especially for beginners.

One particular problem I noticed was in https://www.chartjs.org/chartjs-plugin-zoom/samples/basic.html in "config" tab which uses zoomStatus function which is nowhere to be found. It turns out it's defined between blocks and thus is invisible: https://github.com/chartjs/chartjs-plugin-zoom/blob/master/docs/samples/basic.md Not sure if it's intentional like that or a "bug".

[kurkle]

Can you make something out out of that: https://www.chartjs.org/docs/next/getting-started/usage.html
For what platform do you think the samples should be complete for? And why?

[LeeLenaleee]

Duplicate of #9429, @zadam for issues with the zoom plugin documentation please go to the according repo since it's hosted in the same namespace for URL the plugin doesn't live in this repo

[zadam]

@kurkle to build a working sample you currently need:

• read https://www.chartjs.org/docs/next/getting-started/installation.html to find out that chart.js is available e.g. in CDNJS, click, copy the URL
• read https://www.chartjs.org/docs/next/getting-started/integration.html to find out how to load the chart.js, use URL from the previous page
• read https://www.chartjs.org/docs/next/getting-started/usage.html to find out you also need the <canvas> element and how to init the chartjs instance
• go to some sample and copy paste each individual tab, then you might find out that something (utils, functions between blocks) is missing anyway and the sample doesn't work.

What I would love to see instead is a self contained HTML with inline JavaScript which does all of those - loading of external dependencies from CDNJS, canvas tag, init chart js, all those configs in place, all dependencies (like custom utils) ... it's not even going to be a lot of code.

With this, people can just copy and paste one textarea, save it into a file and start experimenting. Super low barrier to entry.

If by platform you mean bundlers etc. then I would use the dumbest option - script tag referencing CDN.

EDIT: now I noticed that https://www.chartjs.org/docs/next/getting-started/ does compress the setup much more. Although I don't understand the sample there - it seems to define an unused config object, then chart.js configuration which is then unused as well (chartjs initialization seems to be missing).

[amirandev]

In documentation I can read what does some options, parameters do but I need to know which parameters, options I need to use for different types of charts. Different kind of charts use different options man...
I hope you get what I mean.

[amirandev]

These samples are like if I wrote a framework without comments and publish it and in documentation I wrote: "return is for returning values". Try to guess how to use.

[LeeLenaleee]

Well if its not to your liking you can always rewrite the documentation and put in a pr so its clearer for everyone

[amirandev]

If I know how to use it I will not ask here, right?

[Atif-Bashir-1998]

I totally agree with @WEB-TM . The documentation is not clear and it should be changed asap. The documentation might be easier for the contributor of chart.js but it is definitely not helping the developers

[kurkle]

I think both of you are mixing samples and documentation. Samples are used to demo various features, while documentation is the thing to read when figuring out how to use the library.

As always, it can be improved and improvements are welcome, please open a pull request improving the documentation (asap).

[jeremybradbury]

If I know how to use it I will not ask here, right?
@WEB-TM

You have some valid concerns. and @LeeLenaleee is right, did you read #9429?

Sometimes it's best for all, to bring a solution, along with, or just after presenting your problem.

https://codepen.io/jeremybradbury/pen/xxdddoB

@kurkle is right, the samples/examples and are mingled with documentation in the same way that config and data are comingled in this version.

perhaps more of us can provide detailed examples like these, in order to solve the problem of ChartJS experts explaining how it works to ppl who are new.

both sides of that can be a challenging perspective to inject empathy into, speaking on simply the mental logistics and no emotions involved. then add the frustration of not being able to set something simple up... or how to comprehend what could be so hard to grasp about it.

Here is another example I created to help document another issue in another repo. Svelte is just like React so this example translates easily.

https://svelte.dev/repl/96fff1ea92ec46d2b465a0830d958782?version=3.42.6

hopefully these 2 examples can help get ppl started in the right direction... truly open sourcing entire examples instead of having a few small/key pieces that aren't shared, like on the website.

[gageleblanc]

hello this example does not work, i wish i could provide more context for you but there is also no information in the log for why it is not working, there is just a blank chart in front of me, even though the documentation would suggest this is a supported use case. I would make a new issue, but I imagine it will get closed or ignored due to lack of information because, that is how this website works.

[LeeLenaleee]

@gageleblanc The reason we ask for a reproducable of the bug is so we can see why/how its not working and if its an error you yourself have made, otherwise it makes it real hard to debug and will cost a lot of extra work.

In this case it seems indeed to be the case that your code is wrong because object is working just fine: https://jsfiddle.net/Leelenaleee/zb3vea4n/1/

[kurkle]

hello this example does not work, i wish i could provide more context for you but there is also no information in the log for why it is not working, there is just a blank chart in front of me, even though the documentation would suggest this is a supported use case. I would make a new issue, but I imagine it will get closed or ignored due to lack of information because, that is how this website works.

I see the issue (in the documentation) in this case is the missing scope of the data that is talked about:
https://www.chartjs.org/docs/latest/general/data-structures.html